Что такое SVG-блоб?

Блоб — это мягкая органическая форма без прямых граней, находящаяся где-то между кругом и брызгой. Блобы — популярный элемент декора в современном веб-дизайне: их размещают за главными изображениями и иллюстрациями, используют в качестве рамок для аватаров, фонов секций, а также необычных кнопок и бейджей. Поскольку это векторная графика, они остаются чёткими при любом размере и весят всего несколько сотен байт.

Описание инструмента

Этот инструмент создаёт случайные формы блобов в виде чистого SVG-кода прямо в браузере. Нажимайте «Случайная форма», пока не найдёте подходящий вариант, а затем настройте количество выступов, степень неровности и округлость кривых. Задайте сплошную заливку или градиент, используйте контур либо включите плавную анимацию перехода между формами. Скачайте результат в формате SVG или PNG либо скопируйте его как SVG-разметку, фон CSS или CSS clip-path.

Возможности

  • Воспроизводимые случайные блобы: одинаковые начальное значение и настройки всегда дают одну и ту же форму
  • Настройка сложности, случайности и плавности — от округлых камней до острых звёзд
  • Сплошная заливка, градиент или контур любого цвета
  • Анимация морфинга между формами, встроенная в SVG и не требующая JavaScript
  • Скачивание в формате SVG или прозрачного PNG с выбранным размером
  • Готовый для копирования код SVG, фона CSS и CSS clip-path

Как это работает

Инструмент размещает точки по окружности, сдвигает каждую из них внутрь на случайное расстояние и проводит через них плавную замкнутую кривую. Кривая измеряется с высокой точностью и масштабируется так, чтобы блоб заполнял изображение от края до края. Генератор случайных чисел с начальным значением определяет положение каждой точки, поэтому числовое значение или слово в качестве начального значения позволяет позднее восстановить тот же блоб. Для анимации несколько блобов с одинаковым количеством точек помещаются в один SVG-элемент animate, а браузер создаёт плавный переход между ними.

Советы

  • От пяти до восьми точек при средней степени случайности создают классические формы блобов; меньшая случайность выглядит спокойнее и профессиональнее.
  • Установите плавность на 0 %, чтобы получить многоугольники, похожие на кристаллы или драгоценные камни.
  • Используйте код CSS clip-path, чтобы обрезать фотографию или видео по форме блоба.
  • Запишите начальное значение или введите собственное слово в качестве начального значения, чтобы позже в точности воссоздать блоб.
  • Сделайте анимацию морфинга медленной — примерно от 8 до 15 секунд на цикл, чтобы она оставалась спокойным фоновым элементом.