Softonic

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

Шаг 1 / 2
Далее

Изогнутые волны, это разделители секций, к которым рано или поздно прибегает любой лендинг. Этот генератор дискретизирует плавную синусоиду в один залитый <path>, позволяет настроить амплитуду, частоту и вертикальное положение и заливает её любым сплошным цветом, готовую для вставки между двумя секциями без единой строки лишнего CSS. Скопируйте встроенный код SVG и вставьте его прямо на свою страницу.

Как создать волну SVG

  1. 1

    Задайте цвет

    Выберите любой сплошной цвет заливки для волны с помощью палитры.

  2. 2

    Настройте амплитуду

    Повышайте амплитуду (от 0 до 150) для более глубокой кривой или снижайте её для мягкой ряби.

  3. 3

    Задайте частоту

    Выберите от 1 до 8 циклов по ширине. Больше циклов, более насыщенный и волнистый узор.

  4. 4

    Выберите верх или низ

    Закрепите заливку у нижнего края для волны в подвале или у верхнего края для волны в заголовке.

  5. 5

    Скопируйте SVG

    Скопируйте встроенный код SVG и вставьте его в свой HTML или в фон CSS.

Где волны действительно приносят пользу

  • Переходы между секциями между цветным блоком hero и белым телом страницы, чтобы взгляд плавно скользил, а не упирался в резкую линию.
  • Подвалы, где изогнутый верхний край смягчает тёмный блок ссылок.
  • Карточки с ценами, которым нужен аккуратно закрашенный угол без полноценного фонового изображения.
  • Баннеры hero, где волна у нижнего края уводит взгляд читателя вглубь контента.

Устройство контура

Генератор дискретизирует синусоиду в один залитый <path> внутри viewBox 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

Контур проходит по ширине короткими прямыми отрезками, повторяющими синусоиду, а затем замыкается к нижнему краю (или к верхнему), образуя сплошную заливку. Большая амплитуда расширяет гребни и впадины; больше циклов упаковывает их плотнее по ширине.

Как сделать её адаптивной

  • В SVG уже задано preserveAspectRatio="none", поэтому волна растягивается на любую ширину.
  • В нём есть width="100%"; высоту регулируйте через CSS (height: auto или фиксированное значение) по вкусу.
  • Чтобы наложить волны для глубины, поместите две копии в свой CSS, задайте им абсолютное позиционирование и разный цвет и непрозрачность.

Доступность

Волны декоративны. Добавьте aria-hidden="true" и role="img", чтобы программы чтения с экрана пропускали элемент, а весь значимый контент держите в настоящих соседних элементах HTML.

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

Вставляйте SVG встроенно в HTML, когда хотите, чтобы заливка реагировала на переменные CSS (тёмная тема, оформление). Используйте background-image, когда волна чисто декоративна и вы хотите, чтобы браузер кэшировал её отдельно.

Да. Это векторный <path> с preserveAspectRatio="none", поэтому он масштабируется на любую ширину без зубцов, в отличие от растрового изображения, которое размывается при увеличении.

Да. Оберните контур в SVG и анимируйте его атрибут d или transform: translateX() через ключевые кадры CSS. Держите движение сдержанным; автоматически проигрываемые анимации волн быстро приедаются.

Обычно заметно меньше 1 КБ, ведь это один контур с одним цветом заливки. Это ничтожная доля от любого эквивалента в PNG.

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

Справочная таблица 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), свободно сочетая десятичные и двоичные единицы.

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