Генератор SVG-блоб форм онлайн

Тренд органічних форм у дизайні

Абстрактні органічні форми (blob — «крапля») стали популярним дизайн-трендом останніх років. Вони надають веб-сайтам живий, м'який вигляд на противагу суворим прямокутникам. Особливо часто використовуються як кольорові фони-акценти на лендингах, сторінках про нас та hero-секціях.

Як генерується блоб

Блоб-форми будуються на основі кубічних кривих Безьє навколо центральної точки. Алгоритм рандомно зміщує контрольні точки, зберігаючи гладкість (C1-неперервність) у кожному вузлі. Параметр «складність» (complexity) визначає кількість точок; «нерівномірність» (irregularity) — ступінь випадковості форми.

Застосування в CSS та SVG

Використовуйте як inline SVG з градієнтною заливкою. Або через clip-path: path() для обрізання зображень. Анімуйте між двома blob-формами з однаковою кількістю точок для ефекту «дихання». GSAP MorphSVG Plugin або CSS d property анімація спрощують цей процес.

Альтернативи та схожі інструменти

Haikei.app генерує хвилі, сітки та шари у SVG форматі. Blobmaker.app спеціалізується на blob формах. Getwaves.io — хвилеподібні роздільники секцій. Ці інструменти доповнюють один одного для різних завдань дизайну лендингів.