Генератор блобів

Органічні SVG-блоби за лічені секунди

Блоби — це м'які, неправильні фігури, які ви бачите за головними розділами, фотографіями профілю, ілюстраціями та екранами онбордингу застосунків. Вони розбивають жорсткі сітки прямокутників і надають макету дружнього, рукотворного вигляду. Цей генератор блобів створює їх як чисті SVG-шляхи: оберіть кілька параметрів, спостерігайте, як оновлюється фігура, і копіюйте код просто у свій проєкт.

Оскільки блоб — це лише один SVG-шлях, він крихітний, масштабується без втрати якості, його можна перефарбувати через CSS або анімувати, плавно перетворюючи один шлях на інший із тією самою кількістю точок.

Як будується фігура

Генератор розташовує вибрану кількість опорних точок по колу. Випадковість зсуває кожну точку всередину на різну випадкову відстань, а розмір масштабує весь контур у межах полотна. Потім опорні точки з'єднуються замкненим сплайном Catmull-Rom, який перетворюється на кубічні криві Bézier, що гарантує плавні з'єднання без помітних кутів. Із трьома чи чотирма точками ви отримуєте прості фігури, схожі на гальку, а десять і більше точок із високою випадковістю дають хиткі, схожі на хмари форми. За 0% випадковості результат — правильна фігура, заокруглена до ідеального кола.

Кольори, контури та повторне використання

Залийте блоб одним кольором або діагональним двоколірним градієнтом і додайте контур від 1 до 16 пікселів, коли потрібен вигляд наліпки чи значка. Кожен блоб походить із числового seed: однаковий seed і налаштування завжди дають однакову фігуру, тож ви можете зберегти seed, згодом змінити одне значення й залишити все інше незмінним. Завантажте SVG для вебу або PNG розміром 800 на 800 пікселів із прозорим тлом для слайдів і дизайн-інструментів. Уся обробка відбувається локально у вашому браузері, і нічого не завантажується.