Генератор SVG-блобів
Створюйте органічні випадкові SVG-фігури-блоби за налаштуваннями складності та контрасту, генеруйте варіації за допомогою сіда, переглядайте їх у реальному часі та копіюйте SVG чи CSS clip-path.
Генератор SVG-блобів — Задайте, скільки точок має фігура (складність) і наскільки нерівні її краї (контраст), а потім натисніть «Згенерувати заново», щоб отримати нову випадкову варіацію з наступного сіда. Живий перегляд показує блоб під час налаштування, і ви отримуєте як повну SVG-розмітку, так і CSS clip-path, який можна вставити в таблицю стилів. Усе обчислюється у вашому браузері за допомогою генератора випадкових чисел на основі сіда; ані фігури, ані кольори, ані налаштування ніколи не залишають ваш пристрій.
Що таке Генератор SVG-блобів?
Генератор SVG-блобів — це безкоштовний браузерний інструмент для дизайнерів і фронтенд-розробників, яким потрібні мʼякі органічні фігури-блоби для фонів, hero-секцій, аватарів чи декоративних акцентів без малювання вручну. Ви керуєте двома значеннями: складністю (кількість опорних точок навколо фігури) і контрастом (наскільки кожна точка відхиляється від ідеального кола). Сід у стані, що збільшується кнопкою «Згенерувати заново», дає змогу перебирати нескінченні варіації, зберігаючи складність і контраст незмінними. Результат відмальовується як єдиний гладкий замкнений шлях Безьє, тож ви можете скопіювати чисту SVG-розмітку, отримати правило CSS clip-path() для маскування будь-якого елемента або завантажити готовий файл .svg. Використовуйте його, щоб швидко створювати фірмові декорації або щоб зрозуміти, як шляхи блобів будуються з точок навколо кола.
Як користуватися Генератор SVG-блобів
- Відкрийте «Налаштування» та задайте складність (кількість точок, 3-16) фігури.
- Задайте контраст (0-100), щоб керувати тим, наскільки нерівні та хвилясті краї.
- Виберіть колір заливки за допомогою зразка кольору або ввівши значення HEX.
- Натисніть «Згенерувати заново», щоб отримати нову випадкову варіацію з наступного сіда, доки форма вам не сподобається.
- Скопіюйте SVG-розмітку чи правило CSS clip-path або натисніть «Завантажити», щоб зберегти файл .svg.
Приклади
Мʼякий фоновий блоб
Установіть складність 6 і контраст близько 40 для мʼякого заокругленого блоба, потім згенеруйте заново кілька разів, доки не знайдете приємну форму для фону hero-секції чи картки.
Колюча органічна форма
Підніміть складність до 12, а контраст до 80 для більш зубчастого, енергійного силуету, корисного для значків чи грайливих ілюстрацій.
Маска через CSS clip-path
Скопіюйте згенероване правило clip-path: path('...') і застосуйте його до зображення чи div, щоб елемент був обрізаний за контуром блоба.
Поширені запитання
- Що задають складність і контраст?
- Складність — це кількість опорних точок, рівномірно розставлених навколо кола (від 3 до 16): більше точок дають детальніший контур. Контраст — це наскільки кожна точка випадково зсувається всередину або назовні від базового радіуса (від 0 до 100), тож 0 близько до звичайного кола, а 100 — украй нерівний.
- Як працює кнопка «Згенерувати заново»?
- Кожен блоб будується з числового сіда плюс вашої складності та контрасту. «Згенерувати заново» збільшує сід на одиницю та перераховує форму, тож за кожного кліку ви отримуєте нову випадкову варіацію, а складність, контраст і колір залишаються незмінними.
- У чому різниця між виводом SVG і clip-path?
- Вивід SVG — це повний самостійний файл <svg>, який можна вбудувати або завантажити. Вивід clip-path — це одне правило CSS із path(), яке можна застосувати до будь-якого HTML-елемента, щоб обрізати його за тим самим контуром блоба.
- Чи можу я змінити колір і завантажити файл?
- Так. Задайте колір заливки зразком кольору або значенням HEX; його використовують і перегляд, і SVG, і завантаження. Натисніть «Завантажити», щоб зберегти файл blob.svg, цілком згенерований у вашому браузері.
- Чи надсилаються мої фігури або налаштування на сервер?
- Ні. Блоб генерується локальною функцією випадкових чисел на основі сіда, і всі рядки SVG та clip-path будуються у вашому браузері. Нічого не завантажується, тож інструмент працює офлайн, а ваша робота залишається приватною.
Схожі інструменти
Код у зображення
Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.
Перевірка контрастності кольорів
Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.
Змішувач кольорів
Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.
Генератор відтінків кольору
Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.