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

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

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

Поскольку блоб — это всего один SVG-путь, он крошечный, масштабируется без потери качества, его можно перекрасить через CSS или анимировать, плавно превращая один путь в другой с тем же количеством точек.

Как строится фигура

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

Цвета, контуры и повторное использование

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