Softonic

Генератор SVG-блобов

Шаг 1 / 2
Далее

Блобы заменили идеальные круги примерно в 2018 году как «дружелюбный скругленный фон» современного UI, они появляются за hero-иллюстрациями, как маски аватаров и как цветные кляксы на лендингах. Этот генератор строит блоб из случайного блуждания вокруг круга, затем сглаживает многоугольник квадратичными кривыми Безье в органичную, слегка покачивающуюся фигуру, которую ищут дизайнеры. Вы управляете числом контрольных точек (сложность), тем, насколько диким становится блуждание (контраст), и случайным сидом, после чего копируете SVG.

Как строится блоб

  1. 1

    Выберите цвет и сложность

    Сложность задает число контрольных точек (3-12). Больше точек: больше бугров.

  2. 2

    Задайте контраст

    Контраст управляет тем, насколько далеко каждая точка отклоняется от базового радиуса. Низкий контраст = почти круг; высокий = агрессивно лопастная фигура.

  3. 3

    Выберите сид

    Сид: это случайное число, фиксирующее форму блоба. Тот же сид: тот же блоб; нажмите рандомизировать, чтобы получить новый.

  4. 4

    Скопируйте SVG

    Вы получаете один `<path>` внутри viewBox 400×400. Поместите его везде, где поддерживается SVG.

Анатомия пути блоба

Генератор равномерно распределяет N точек вокруг viewBox 400×400 (центр 200, 200; базовый радиус 130), отклоняет каждый радиус на ±contrast, затем соединяет каждую пару квадратичной кривой Безье:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy, это середина текущей и следующей точки; размещение конца каждой кривой там и скругляет многоугольник в органичную фигуру.

Шпаргалка по параметрам

Настройка Диапазон Эффект
Сложность 3-12 Число лопастей. 5-7, золотая середина для UI.
Контраст 0-100 Амплитуда случайного блуждания. 30-60 выглядит естественно.
Сид 1-9999 Детерминированный; тот же сид = тот же блоб между запусками.
Цвет hex Одна заливка, без обводки. При необходимости добавьте fill-opacity вручную.

Где блобы работают лучше всего

  • Фоновый декор, за заголовками, в пустых углах hero-секций.
  • Маски аватаров, примените путь как clip-path для органичных рамок портретов.
  • Акценты иллюстраций, клякса фирменного цвета под иконками или числами.
  • Маски изображений, с CSS mask-image блоб обрезает фото в органичные вырезы.

Советы

  • Держите блобы без обводки для фонов; обводка делает их похожими на наклейку.
  • Для анимированного морфинга сгенерируйте два блоба с одинаковой сложностью и разными сидами, затем анимируйте атрибут d библиотекой вроде flubber или svg-morpheus.
  • Встраивайте SVG инлайн, а не через <img src=blob.svg>, это позволяет менять цвет заливки CSS-переменными во время выполнения.
  • Сохраните viewBox, но уберите явные width="400" height="400", если хотите, чтобы блоб масштабировался под любой контейнер.

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

Сид инициализирует srand() в PHP перед случайным блужданием. Тот же сид = та же последовательность вызовов rand() = те же смещения точек = идентичный путь.

Да, но только если у обоих путей одинаковое число команд и точек. Держите сложность идентичной и варьируйте только сид, чтобы получить дружественные к интерполяции пары. Используйте библиотеку твининга вроде GSAP MorphSVG или flubber для самой анимации.

Замените fill="#hex" на пути на fill="url(#gradient-id)" и добавьте определение <linearGradient> или <radialGradient> внутри блока <defs>. CSS-переменные тоже работают, если вы встраиваете SVG инлайн.

Он чистый, но не минифицированный. Прогоните его через SVGO один раз, если вам важен размер в байтах; обычно можно убрать 20-30% символов.

Нет. SVG генерируется на лету из параметров формы, и ничего не логируется.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

Инструмент доступен на других языках