Генератор SVG-блобов (органические формы)
Нажимайте на другую форму, пока не найдёте подходящую. Настройте точки и неровность, выберите цвета и скопируйте SVG или используйте как маску для фото.
Как пользоватьсяОрганические формы для сайта
Доступно на: 
Генератор SVG-блобов (органические формы): для чего нужен
Выберите число точек и неровность, цвет или двухцветный градиент и создавайте новые формы одним нажатием. Кривая плавно проходит через все точки и замыкается без углов.
Скачайте SVG, скопируйте код или версию маски (clipPath), чтобы обрезать любое фото по форме блоба.
Как пользоваться
- Настройте точки и неровность.
- Выберите цвет или градиент и создавайте формы, пока не понравится.
- Скачайте SVG или скопируйте маску для фото.
Когда использовать
- Фоны за фото и иллюстрациями.
- Фото профиля органической формы.
- Украшения разделов сайтов и постов.
Частые вопросы
Для чего нужен блоб?
Органические формы смягчают строгость квадратных макетов: хорошо смотрятся за фото, значками и иллюстрациями, как фон разделов и как рамка фото профиля.
Как использовать как рамку для фото?
Скопируйте код маски (clip-path): он использует тот же рисунок в clipPath с относительными координатами, и любое изображение со стилем clip-path:url(#blob) примет форму блоба.
Можно ли анимировать?
Да: создайте две формы с одинаковым числом точек и анимируйте атрибут d средствами CSS или JavaScript. Используйте медленные анимации и учитывайте тех, кто предпочитает меньше движения (prefers-reduced-motion).
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.