Генератор SVG-волн
Создайте плавную SVG-волну, чтобы разделить два раздела страницы мягче, чем простой прямой линией. Амплитуда, частота и цвет полностью настраиваются.
Как это работает
Волна строится из последовательных кубических кривых Безье: каждый «изгиб» чередуется между верхом и низом базовой линии, поэтому контур получается плавным, без углов. Число изгибов (частота), их высота (амплитуда) и цвет заливки настраиваются независимо друг от друга.
Как использовать эту волну как разделитель между двумя разделами?
Скопируйте SVG-код и поместите его с абсолютным позиционированием внизу (или вверху, с опцией «Отразить») цветного раздела, задав ширину 100%: волна перекроет переход между этим разделом и следующим. Цвет фона следующего раздела должен совпадать с цветом заливки SVG, чтобы стык был незаметным.
Должна ли заданная ширина точно совпадать с шириной моей страницы?
Нет: благодаря атрибуту preserveAspectRatio="none" и ширине в процентах в CSS SVG растягивается на всю доступную ширину контейнера, даже если его исходная ширина не совпадает с шириной вашей страницы.
Генерация на 100% локально: кривая вычисляется полностью в вашем браузере, данные на сервер не отправляются.