Как пользоваться: Генератор SVG блобов
- Нажимайте Новый случайный блоб, пока форма вас не устроит.
- Используйте Сложность, чтобы добавить или убрать выступы, и Случайность, чтобы сделать контур более round или более неровным.
- Выберите сплошной цвет, градиент или контур.
- Скачайте результат в SVG (масштабируется под любой размер) или PNG либо скопируйте код SVG в свой HTML.
Как создаются блобы
Генератор расставляет точки по окружности, смещает каждую из них внутрь или наружу на случайную величину и соединяет их плавной замкнутой кривой (сегменты кубических Безье проходят через каждую точку). Чем больше точек, тем больше выступов; чем выше случайность, тем менее круглый контур. Результат — один элемент <path>: он компактный, чёткий при любом размере и легко перекрашивается.
Использование блобов на сайте
- Декоративный фон: разместите SVG абсолютно позиционированным за главным блоком страницы, используя мягкий цвет или низкую непрозрачность.
- Маски для изображений: используйте блоб как
mask-imageили превратите путь вclip-path: path(), чтобы обрезать фото по форме. - Анимация: создайте два блоба с одинаковой сложностью и анимируйте переход между ними с помощью CSS или SMIL — получится эффект «морфинга».
Нужна фигура только на CSS? Генератор border-radius создаёт блобы из восьми значений радиуса. Для разделителей секций попробуйте генератор SVG-волн.
Также ищут как: блоб генератор, генератор blob svg, генератор органических форм, случайный blob svg, создать blob онлайн, генератор абстрактных фигур.
Инструменты, которые хорошо сочетаются с Генератор SVG блобов
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- SVG Оптимизатор — Очистите SVG, экспортированные из Figma, Illustrator, Inkscape или Sketch, с помощью SVGO.
- Конвертер SVG в PNG — Превращайте векторную графику SVG в чёткие PNG-изображения нужного размера — для магазинов приложений, соцсетей, писем и документов.
Часто задаваемые вопросы
Как создать форму блоба?
Нажмите «Новый случайный блоб», настройте сложность и случайность и скачайте SVG. Каждый блоб — это один плавный путь.
Можно ли использовать блобы в коммерческих проектах?
Да. Формы генерируются случайным образом на вашем устройстве — используйте их в любых проектах без указания авторства.
Как поместить изображение внутрь блоба?
Используйте SVG как CSS-маску (mask-image: url(blob.svg)) для изображения или скопируйте путь в SVG-элемент clipPath.
SVG или PNG?
SVG для сайтов: он остаётся чётким при любом размере и занимает мало места. PNG — для приложений, которые не принимают SVG, например для некоторых инструментов создания презентаций и соцсетей.
Можно ли установить Генератор SVG блобов как веб-приложение и пользоваться им офлайн?
Да. Генератор SVG блобов — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.