Генератор SVG Blob

Создавайте красивые SVG Blob за секунды

Органические формы blob — один из самых популярных трендов современного веб-дизайна: они используются как hero-фоны, разделители секций, декоративные акценты на карточках и даже как иконки приложений. Этот генератор SVG Blob позволяет создавать уникальные, идеально гладкие blob-формы с помощью нескольких ползунков, а затем скопировать SVG или скачать его для использования в любом проекте.

Как строится Blob

Генератор размещает заданное число якорных точек равномерно вдоль окружности, а затем смещает радиус каждой точки на случайную величину, зависящую от выбранного параметра случайность. Точки соединяются в замкнутую гладкую кривую с помощью кубических сегментов Безье, полученных из сплайна Catmull–Rom, что гарантирует чистый непрерывный контур без видимых углов — независимо от того, насколько хаотичны исходные точки.

Детерминированный seed управляет каждым случайным решением — одна и та же конфигурация всегда даёт один и тот же blob. Кнопка перегенерировать позволяет пробовать новые формы, не меняя остальных параметров.

Параметры настройки

• Сложность — число якорных точек (от 3 до 20). Низкие значения дают мягкие округлые формы, высокие — сложные волнистые контуры.
• Случайность — насколько каждая точка может отклоняться от базового радиуса. Ноль — круг; максимальная случайность — впечатляющие органические формы.
• Seed — целое число, обеспечивающее воспроизводимость результата. Одинаковый seed всегда даёт одну и ту же форму.
• Заливка — сплошной цвет или двухцветный линейный градиент с регулируемым углом.
• Обводка — необязательная линия с настраиваемым цветом и толщиной.

Форматы вывода

Генератор создаёт чистую минимальную SVG-разметку, которую можно вставлять прямо в HTML-документ, React-компонент, файл Figma или любой инструмент дизайна, поддерживающий SVG. Копируйте код в буфер обмена одним кликом или скачивайте форму как отдельный файл .svg.

Типичные применения

• Hero-фоны и акценты на лендингах
• Маски изображений в стиле аватара
• Декоративные формы за карточками возможностей
• Абстрактные значки и элементы UI в стиле стикеров
• Blob-переходы между секциями страницы
• Декор презентационных слайдов

Поскольку на выходе — чистый SVG, он остаётся чётким при любом разрешении, занимает минимум места и может анимироваться через CSS или JavaScript. При необходимости полученный путь можно дополнительно редактировать в Illustrator, Figma или Inkscape.