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