Генератор SVG-blob
Создавайте плавные органические SVG-blob с настраиваемым числом точек, случайностью и seed. Заливка сплошная, градиентом или контур; .svg и CSS data URI.
Настройки кляксы
Одинаковые настройки и сид всегда дают одну и ту же форму.
Предпросмотр
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");Похожие Инструменты
Просмотреть ВсеЧто такое Генератор SVG-blob?
Генерирует плавные органические формы blob в SVG. Управляйте числом опорных точек, неровностью формы и её размером, выбирайте сплошную, градиентную заливку или контур и экспортируйте как файл .svg или CSS data URI.
Как пользоваться Генератор SVG-blob
- Выберите заливку (Solid, Gradient или Outline) и цвет или цвета.
- Задайте число опорных точек, случайность и размер.
- Нажмите «Случайно» или введите seed для конкретной формы.
- Скачайте .svg или скопируйте SVG-код.
- Либо скопируйте CSS background (data URI).
Пример
Points 4, randomness 0, size 100, solid #8a3ffc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
Когда использовать Генератор SVG-blob
Используйте blob как декоративные фоны, маски изображений, рамки аватаров или акценты в иллюстрациях. При нулевой случайности получается почти круг; для точных геометрических форм лучше CSS border-radius или clip-path.
Как работает Генератор SVG-blob
Опорные точки равномерно расставляются по окружности (радиус 45% от размера). Расстояние каждой точки от центра уменьшается на псевдослучайную величину по seed до 60% × случайность. Замкнутый сплайн Катмулла-Рома через точки преобразуется в кубические команды Безье, что гарантирует плавный контур без изломов. Градиентная заливка использует SVG linearGradient от верхнего левого угла к нижнему правому.
Распространенные Случаи Использования
- Декоративные фоновые формы на лендингах
- Маски изображений для фото профиля
- Акценты и стикеры в иллюстрациях
- Анимированные перетекающие blob (создайте несколько с разными seed)
- Заглушки в презентациях
Часто Задаваемые Вопросы
Можно ли воссоздать понравившийся blob?
Да. Сохраните seed вместе с числом точек, случайностью и размером; они всегда дают один и тот же контур.
Как использовать blob как маску изображения?
Поместите контур внутрь SVG <clipPath> или используйте скачанный SVG с CSS mask-image.
Почему blob никогда не касается краёв?
Максимальный радиус составляет 45% от размера, оставляя небольшой запас, чтобы контуры и сглаживание не обрезались.