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

Создавайте плавные органические SVG-формы — копируйте SVG или CSS clip-path.

Последнее обновление 17 мая 2026 г.

Точки6Случайность50

Градиент

SVG-разметка

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

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

Генератор SVG-блобов создаёт замкнутые органические формы, выбирая точки вокруг окружности и соединяя их плавными кривыми Безье. Результат — мягкий, текучий силуэт — такие формы вы видите за маркетинговым hero, вокруг фотографии профиля или как разноцветный блоб-фон на лендинге.

Блобы живут в идеальной точке между геометрией и случайностью. Настройте количество точек, чтобы получить формы вроде желейного боба (3-4), гальки (5-6) или хаотичные (10+). Двигайте слайдер случайности от почти-круга до дико искажённого. Нажимайте на кубик, чтобы выкинуть новый seed в любой момент.

Всё работает в браузере. Экспортируйте как готовый к копированию SVG-сниппет, загружаемый .svg-файл или значение CSS clip-path, которое можно применить напрямую к любому HTML-элементу, чтобы замаскировать его под форму блоба.

Что вы узнаете, делая блобы

Кубические кривые Безье дают блобу его плавность — у каждой пары соседних точек есть две контрольные ручки, вычисленные так, чтобы касательная была непрерывной в каждом стыке.
Сплайны Catmull-Rom (используются здесь) автоматически выводят эти ручки из соседних точек, так что вам не нужно вручную настраивать контрольные точки, чтобы кривая оставалась плавной.
CSS clip-path: path(...) может применить форму блоба к любому элементу — изображению, div, видео — не влияя на его layout-box.

Как сгенерировать блоб шаг за шагом

Выберите количество точек
Меньше точек (3-5) дают формы вроде желейного боба. Больше точек (8-12) — каменистые, неправильные.
Настройте случайность
0% — это круг. 50% даёт мягкие кривые в форме блоба. 100% — дикие искажённые драматичные силуэты.
Выберите цвет или градиент
Сплошная заливка или включите Градиент и выберите два цвета плюс угол. Соответствует популярным паттернам hero-секций.
Рандомизируйте и экспортируйте
Нажмите на кубик, чтобы выкинуть новый seed. Когда вам понравится, скопируйте SVG, скопируйте CSS clip-path или скачайте .svg-файл.

Где блобы работают лучше всего

Три распространённых способа использовать блоб и на что обратить внимание.

Сценарий	Как применить	Что учитывать
Hero-фон	Вставьте SVG, абсолютное позиционирование за контентом	Сохраняйте контраст — текст поверх блоба нуждается в читаемом цвете
Маска изображения	Примените CSS clip-path: path('…') к <img>	Источник изображения всё равно скачивается — клип только визуальный
Форма аватара	Оберните фото профиля в div с clip-path	Используйте border-radius, если хватает круга — clip-path дороже при перерисовке
Разделитель секций	Растяните широкий блоб вдоль нижнего края секции	Используйте viewBox preserveAspectRatio, чтобы форма оставалась правильной на широких экранах
Декоративный акцент	Расположите несколько полупрозрачных блобов разных размеров	Анимация должна быть умеренной — большие перерисовываемые path жгут CPU
Брендовая иллюстрация	Комбинируйте блоб с текстом или иконкой сверху	Выберите один последовательный стиль формы, чтобы поддержать идентичность бренда

Примеры блобов, которые стоит попробовать

Добавьте блоб в hero-секцию

HTML

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Добро пожаловать в Coddy</h1></section>

CSS

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

Абсолютно позиционированный SVG располагается за заголовком. Снизьте opacity, чтобы текст сверху оставался читаемым без backdrop-filter.

Замаскировать изображение в форму блоба

CSS

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path поддерживается во всех современных браузерах. Координаты path предполагают viewBox 400×400 — масштабируйте изображение к этому боксу, чтобы клип выровнялся чисто.

Два мягких блоба как декоративный фон

HTML

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

CSS

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Слои размытых блобов дают мягкое ощущение "авроры". Держите их за пределами видимой области с отрицательными отступами, чтобы внутрь заходили только закруглённые края.

Частые ошибки с SVG-блобами

Забыть viewBox и дать <svg> фиксированные width/height. Форма не будет масштабироваться отзывчиво — используйте viewBox плюс width/height в CSS.
Анимировать большие заполненные path каждый кадр. Растеризация path дорогая; используйте transform/opacity или предварительный blur через CSS filter, чтобы GPU справлялся.
Скопировать inline <svg> в Tailwind/Bootstrap и унаследовать display: inline вместо block. Стандартный baseline gap оставляет пару пикселей под формой.

Часто задаваемые вопросы

Что такое блоб в дизайне?

Блоб — это органическая, асимметричная замкнутая форма из плавных кривых. Они популярны в современном веб-дизайне — hero-фонах, бейджах, масках аватаров — потому что ощущаются более приветливо, чем круги, и более отполированно, чем формы от руки.

Можно ли использовать сгенерированный SVG в коммерческих целях?

Да. Вывод — это просто SVG-разметка, которую вы сами сгенерировали — нет привязанной лицензии и не требуется атрибуция. Используйте на коммерческих сайтах, в приложениях, презентациях, где угодно.

Можно ли отредактировать path после копирования?

Да — вывод представляет собой стандартный SVG <path d="…">. Откройте в Figma, Illustrator, Inkscape или любом векторном редакторе, чтобы подкорректировать контрольные точки. Или регенерируйте здесь и скопируйте новую форму.

Как использовать вывод CSS clip-path?

Примените clip-path: path('M … Z') к любому HTML-элементу. Координаты находятся в том же пространстве SVG viewBox (по умолчанию 400×400 здесь), поэтому отмасштабируйте обрезанный элемент к этому боксу, чтобы клип выровнялся — или отмасштабируйте координаты path.

Math.random даёт ту же форму при каждом посещении?

Нет, но этот инструмент использует псевдослучайный генератор с seed. Тот же seed всегда производит тот же блоб — поэтому вы можете жать Рандомизировать, пока не найдёте форму, которая вам нравится, и SVG-вывод сохранит ту же форму навсегда.

Замедлят ли блобы мою страницу?

Один статический SVG-блоб по сути бесплатный. Множество анимированных блобов с blur-фильтрами могут стать дорогими на мобильных — профилируйте в DevTools и предпочитайте анимации transform/opacity анимациям атрибутов path.