Генератор SVG-блобов

Создавайте органичные случайные SVG-фигуры-блобы по настройкам сложности и контраста, генерируйте вариации с помощью сида, смотрите их в реальном времени и копируйте SVG или CSS clip-path.

Загрузка инструмента…

Генератор SVG-блобов — Задайте, сколько точек у фигуры (сложность) и насколько неровные её края (контраст), затем нажмите «Сгенерировать заново», чтобы получить новую случайную вариацию из следующего сида. Живой предпросмотр показывает блоб по мере настройки, а вы получаете и полную SVG-разметку, и CSS clip-path, который можно вставить в таблицу стилей. Всё вычисляется в вашем браузере с помощью генератора случайных чисел на основе сида; ни фигуры, ни цвета, ни настройки никогда не покидают ваше устройство.

Что такое Генератор SVG-блобов?

Генератор SVG-блобов — это бесплатный браузерный инструмент для дизайнеров и фронтенд-разработчиков, которым нужны мягкие органичные фигуры-блобы для фонов, hero-секций, аватаров или декоративных акцентов без рисования вручную. Вы управляете двумя значениями: сложностью (число опорных точек вокруг фигуры) и контрастом (насколько каждая точка отклоняется от идеального круга). Сид в состоянии, увеличиваемый кнопкой «Сгенерировать заново», позволяет перебирать бесконечные вариации, сохраняя сложность и контраст неизменными. Результат отрисовывается как единый гладкий замкнутый путь Безье, поэтому вы можете скопировать чистую SVG-разметку, получить правило CSS clip-path() для маскирования любого элемента или скачать готовый файл .svg. Используйте его, чтобы быстро создавать фирменные декорации или чтобы понять, как пути блобов строятся из точек вокруг круга.

Как пользоваться Генератор SVG-блобов

  1. Откройте «Настройки» и задайте сложность (число точек, 3-16) фигуры.
  2. Задайте контраст (0-100), чтобы управлять тем, насколько неровные и волнистые края.
  3. Выберите цвет заливки с помощью образца цвета или ввода значения HEX.
  4. Нажмите «Сгенерировать заново», чтобы получить новую случайную вариацию из следующего сида, пока форма вам не понравится.
  5. Скопируйте 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.