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

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

Волны — один из самых аккуратных способов отделить одну секцию страницы от другой: они добавляют движения, характера и глубины дизайну без необходимости в изображении. Этот генератор SVG-волн создаёт простой элемент <path> внутри <svg>, который с width: 100% растягивается на любую ширину.

Элементы управления

• Сегменты — количество «горбов» волны. Один сегмент даёт плавную одиночную кривую; десять — насыщенный ритмичный рисунок.
• Амплитуда — вертикальный размах каждого горба. Низкая амплитуда — мягкая рябь, высокая — драматичная волна.
• Seed — детерминированное целое число, управляющее случайной вариацией между горбами. Кнопка перегенерировать переключает на новую форму.
• Перевернуть — переключает между нижним разделителем (волна сверху, заливка снизу) и верхним (волна снизу, заливка сверху).
• Заливка — сплошной цвет или двухцветный линейный градиент под любым углом.

Использование результата

Поскольку SVG использует preserveAspectRatio="none", его можно растянуть на любую ширину, обернув в контейнер с CSS-width — волна подстроится под страницу, сохраняя свою высоту. Вставьте сгенерированный SVG прямо в HTML, React-компонент или шаблон.

<div style="width:100%"><!-- сгенерированный svg --></div>

Типичные применения

• Разделители между hero-секцией и следующим блоком
• Игривые футеры
• Анимированные фоновые кривые (путь можно анимировать с помощью CSS или SMIL)
• Декоративные формы за карточками тарифов, отзывами и секциями возможностей
• Плейсхолдеры загрузки и переходы между секциями

Путь детерминирован — один и тот же seed всегда даёт одну и ту же волну — поэтому найденная форма остаётся стабильной. Сохраните SVG в файл, если нужно доработать его в векторном редакторе или вручную подправить цвета.