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

Начните с пресета или кнопки «Случайная волна», затем подправьте детали. Число волн задаёт количество полных периодов по ширине, амплитуда — глубину изгиба; 0% даёт прямую линию. «Случайность» делает гребни неровными, а seed фиксирует этот рисунок: та же пара значений всегда даёт ту же волну, в том числе по ссылке.

Слои выводятся от заднего к переднему. «Сдвиг слоёв» смещает соседние слои по фазе, «Разнос» — по вертикали, а непрозрачность задних слоёв добавляет глубину. Кнопка «Оттенки от цвета слоя 1» строит палитру из одного цвета. Градиент окрашивает каждый слой от его цвета ко второму, общему цвету. Режим «Контур» рисует только линии; толщина не меняется при растяжении SVG благодаря vector-effect="non-scaling-stroke".

Анимация встроена в SVG через CSS @keyframes: путь рисуется на две ширины и сдвигается на одну, поэтому стык незаметен, а задние слои движутся медленнее; галочка «Прокрутка вправо» меняет направление. При системной настройке «уменьшить движение» (prefers-reduced-motion) волна останавливается. Наклон и арка не повторяются, поэтому не анимируются; горизонтальный градиент тоже несовместим с прокруткой.

SVG можно вставить как изображение, CSS-фон или прямо в HTML. «Высота на экранах до 640px» добавляет в CSS и HTML правило @media, чтобы на телефоне волна не занимала полэкрана; 0 отключает его. Кнопка под кодом открывает конвертер SVG → React / Vue с уже подставленным разделителем. preserveAspectRatio="none" позволяет менять соотношение сторон декоративной волны — сравните варианты в тренажёре координат. Включите «Показать на макете секций», чтобы увидеть стык с соседней секцией: её фон должен совпадать с цветом переднего слоя. id градиентов строятся из настроек, поэтому несколько разных разделителей можно встроить в одну страницу.

Разделитель декоративный: в примере используется aria-hidden="true". При вставке через img задайте пустой alt. PNG можно получить в выбранном размере, с прозрачностью или цветным фоном; анимация в PNG не сохраняется.