Дизайн / SVG

Генератор SVG-волн для разделителей секций

Создавайте плавные многослойные SVG-волны для границы между двумя секциями страницы: выбирайте количество слоёв и волн, высоту, плавность и цвет, затем скачивайте SVG или копируйте его как фон CSS.

Генератор SVG-волн для разделителей секций: Каждый слой состоит из ряда точек, которые на случайную величину чередуются выше и ниже базовой линии. Точки соединяются плавной кривой, а область под ней заполняется до нижнего края. Задние слои имеют более светлый оттенок, поэтому создаётся ощущение глубины. SVG растягивается до любой ширины, а версия CSS встраивает его в качестве фона через data URI. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Генератор волн SVGЛокальная обработка

Полностью работает в браузере

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG растягивается до любой ширины (preserveAspectRatio="none"), поэтому подходит для разделителей секций на всю ширину. Разместите его внизу одной секции, используя цвет фона следующей секции, или переверните для размещения сверху. При одном и том же случайном начальном значении всегда получается одна и та же волна.

SVG или CSS?

Встроенный SVG можно стилизовать и анимировать с помощью CSS, а для его заливки использовать currentColor. В качестве фона CSS SVG становится URI данных: ничего дополнительно загружать не нужно, но цвет зафиксирован в коде. В обоих случаях файл занимает несколько сотен байт; дополнительно его можно очистить с помощью очистителя SVG.

Плавность

Кривая представляет собой сплайн Catmull–Rom, преобразованный в кубические сегменты Безье: при максимальной плавности она мягко проходит через каждую точку, а при нулевой превращается в прямые линии между точками, образуя неровный горный край.

Как пользоваться

  1. Задайте количество слоёв и волн, а также их высоту.
  2. Выберите цвет и переверните волну для верхней части секции.
  3. Нажмите кнопку, чтобы создать новые случайные волны, затем скачайте SVG или скопируйте CSS.

Конфиденциальность и ограничения

Волны создаются в вашем браузере.

Похожие инструменты

SVG-блобПаттерн CSSCSS-градиент

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

Как использовать волну между двумя секциями?

Задайте для волны цвет секции ниже и разместите её внизу секции выше на всю ширину; чтобы использовать её в верхней части секции, переверните волну.

Одинаковые настройки дадут одну и ту же волну?

Да: форма создаётся на основе случайного начального значения и меняется только после нажатия кнопки создания новой волны.

Можно ли использовать эти волны в коммерческих проектах?

Да: формы создаются для вас и не имеют лицензионных ограничений.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен