Дизайн / SVG

Генератор SVG-блобов (случайные органические формы)

Создавайте плавные случайные формы для фонов и иллюстраций: выбирайте количество точек и степень случайности, задавайте цвет или градиент из двух цветов, а затем скачивайте или копируйте SVG.

Генератор SVG-блобов (случайные органические формы): Точки равномерно распределяются по окружности, а затем каждая случайно смещается к центру на разное расстояние. После этого точки соединяются плавной замкнутой кривой. Небольшое количество точек и высокая степень случайности создают неровные формы, а большое количество точек и низкая степень случайности — плавные, почти круглые. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Генератор блобов SVGЛокальная обработка

Полностью работает в браузере

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>

Точки равномерно размещаются по окружности, каждая на случайное расстояние смещается к центру, а затем соединяется с соседними плавной замкнутой кривой. Чем меньше точек и больше случайность, тем более неровной получается форма; при случайности 0% получается круг. Блобы создают мягкий фон для фотографий, значков и заголовков.

Применение

Фигуры-блоб создают мягкий фон для фотографий товаров, значков, аватаров и заголовков. За текстом используйте бледный цвет или заливку с низкой непрозрачностью, чтобы сохранить контраст; чтобы увидеть блоб за матовым стеклом, объедините его с генератором glassmorphism.

Редактирование

Результат представляет собой один контур с кубическими кривыми Безье, поэтому его можно открыть в любом векторном редакторе. Чтобы вручную изменить несколько точек, вставьте его в редактор SVG.

Как пользоваться

  1. Выберите количество точек и степень случайности.
  2. Выберите цвет или градиент.
  3. Нажимайте кнопку создания новых блобов, пока не найдёте подходящий вариант, затем скачайте или скопируйте SVG.

Конфиденциальность и ограничения

Формы создаются в вашем браузере.

Похожие инструменты

SVG-волнаРедактор SVGСтекломорфизм

Часто задаваемые вопросы

Как поместить фотографию внутрь блоба?

Скопируйте путь и используйте его в SVG clipPath либо сохраните блоб и примените его к фотографии как CSS mask-image.

Можно ли анимировать блоб?

Да: создайте два блоба с одинаковым количеством точек и анимируйте атрибут d пути между ними. Одинаковое количество точек обеспечивает плавное превращение формы.

Есть ли ограничение по размеру?

Размер SVG — 400 × 400, но его можно масштабировать до любого размера без потери резкости.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен