Генератор SVG-клякс (blob)
Нажимайте кнопку, пока фигура не понравится, затем скопируйте SVG или скачайте его. Клякса — один плавный замкнутый контур, поэтому её можно масштабировать до любого размера и перекрашивать в коде или в любом векторном редакторе.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Задайте сложность: 3–4 точки дают фигуры вроде гальки, 8–12 — более волнистые.
- Задайте неровность: 0 % — почти круг, 100 % — очень неровная фигура.
- Выберите цвет или режим «только контур» и нажимайте Новая фигура, пока результат не понравится.
- Скопируйте код или скачайте blob.svg.
Как это работает
Точки лежат на расстоянии от 80 × (1 − 0,6 × неровность) до 80 единиц от центра холста 200 × 200, с небольшим случайным сдвигом по углу. Через них проводится сплайн Катмулла — Рома, записанный кубическими кривыми Безье: каждая контрольная точка отстоит от своей опорной точки на одну шестую отрезка между её соседями. Так кривая плавно проходит через все точки и замыкается без угла.
Пример
Для четырёх точек на квадрате — (100, 20), (180, 100), (100, 180) и (20, 100) — первая кривая идёт от (100, 20) к (180, 100) с контрольными точками (100 + 160 ÷ 6, 20) = (126,7, 20) и (180, 100 − 160 ÷ 6) = (180, 73,3).
Советы
- Для фона на главном экране наложите две-три кляксы разных цветов с некоторой прозрачностью.
- Контурный вариант подойдёт как декоративная рамка за фотографией.
- Чтобы анимировать переход между фигурами, оставьте одинаковую сложность — тогда у обоих контуров будет одинаковое число точек.
Частые вопросы
Как строится фигура?
Генератор расставляет точки по окружности через равные углы, сдвигает каждую внутрь на случайную величину и соединяет их плавной замкнутой кривой. Сложность — это число точек, неровность — насколько далеко внутрь они могут сместиться.
Можно ли снова получить ту же кляксу?
Каждая фигура строится из случайного зерна (seed). При смене сложности, неровности, цвета или размера зерно сохраняется, и фигура меняется предсказуемо; новое зерно выбирает только кнопка «Новая фигура». Чтобы сохранить фигуру, скопируйте или скачайте SVG.
Как использовать кляксу на сайте?
Вставьте код SVG прямо в HTML, сохраните его файлом для тега img или CSS-фона или возьмите только атрибут d контура для clip-path или маски.
Что меняет настройка размера?
Только атрибуты width и height у SVG. Сам рисунок задан во viewBox 200 × 200, поэтому остаётся чётким при любом размере, и его можно свободно масштабировать в CSS.