Генератор SVG-волн
Создавайте многослойные SVG-волны с настройкой амплитуды, сложности, плавности и цветов. Копируйте SVG или CSS либо скачивайте SVG и PNG.
🔒 Работает полностью в вашем браузере — ничего не загружаетсяМногослойные SVG-волны для современных макетов
Волнистые разделители — популярный способ смягчить границу между двумя разделами веб-страницы. Вместо резкой горизонтальной линии изогнутый край добавляет движения и глубины главным баннерам, футерам, таблицам цен и лендингам. Этот генератор SVG-волн создаёт такие фигуры за вас. Он накладывает несколько полупрозрачных или сплошных слоёв, каждый со своей случайной кривой, и смешивает их между двумя цветами, так что результат напоминает холмы или водную гладь.
Поскольку результат — это обычный SVG, он остаётся чётким при любом размере, весит всего несколько сотен байтов и его можно стилизовать, анимировать или встроить прямо в HTML. Также его можно скопировать как CSS data URI для background-image, что удобно, когда в проект нельзя добавить отдельные файлы.
Что меняют элементы управления
Слои определяют, сколько перекрывающихся волн будет нарисовано — от одной чистой кривой до шести наложенных полос. Амплитуда управляет высотой гребней и впадин. Сложность — это количество гребней по ширине: малые значения дают длинные ленивые волны, большие — неспокойное море. Плавность определяет, как соединяются точки: при 0% волна угловатая, как зигзаг, а при 100% становится округлой кривой из кубических сегментов Bézier. Заливка может быть сочетанием двух сплошных цветов, по одному на слой, или горизонтальным градиентом с непрозрачностью, растущей к переднему плану.
Использование и экспорт волны
Каждая волна генерируется из числового seed, поэтому дизайн полностью воспроизводим: запишите seed и значения ползунков — и позже вы сможете создать его заново. Используйте Отразить по вертикали для волн, свисающих с верхнего края раздела, и включайте прозрачный фон, когда SVG должен лежать поверх другого цвета. Скачайте SVG для веба или экспортируйте PNG размером 1440 на 480 пикселей для презентаций и дизайн-инструментов. Размещая SVG на странице, растяните его на всю ширину и задайте фону раздела тот же цвет, что и фону волны, чтобы избежать тонких швов. Всё вычисляется локально в вашем браузере, поэтому никаких загрузок и никакой учётной записи.
Как использовать
- Сформируйте волныНастройте количество слоёв, амплитуду, сложность и плавность, пока кривые не будут выглядеть как нужно.
- Выберите цветаВыберите два цвета и сплошную или градиентную заливку, затем задайте фон или сделайте его прозрачным.
- Сгенерируйте случайноНажмите «Случайно» или введите seed, чтобы посмотреть варианты, и используйте «Отразить», чтобы перенести волны наверх.
- ЭкспортируйтеСкопируйте SVG или CSS-фон либо скачайте волну как файл SVG или PNG.