Генератор SVG-волн
Генерируйте плавные, острые или ступенчатые SVG-волны со слоями, амплитудой и seed. Скачайте .svg или скопируйте как CSS data URI для разделителей секций.
Настройки волны
Одинаковые настройки и сид всегда дают одну и ту же форму.
Предпросмотр
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Похожие Инструменты
Просмотреть ВсеЧто такое Генератор SVG-волн?
Создаёт волнистые формы в SVG для разделителей секций и фонов. Выберите плавные кривые, острые пики или ступени, наложите до пяти слоёв, поверните волну наверх и экспортируйте как файл .svg или готовый для вставки CSS data URI в background-image.
Как пользоваться Генератор SVG-волн
- Выберите цвет, стиль волны (Smooth, Peaks, Steps) и положение (снизу или сверху).
- Настройте сложность, амплитуду, число слоёв, прозрачность, ширину и высоту.
- Нажмите «Случайно» или введите seed, чтобы получить другую, но воспроизводимую волну.
- Скачайте .svg или скопируйте SVG-код.
- Либо скопируйте CSS background (data URI), чтобы использовать волну без отдельного файла.
Пример
Complexity 2, amplitude 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Нулевая амплитуда даёт плоскую линию, на которой видно точное построение кривых Безье.
Когда использовать Генератор SVG-волн
Подходит для волнистых разделителей секций, подвалов и фонов первого экрана. preserveAspectRatio="none" растягивает волну на любую ширину, что годится для разделителей во всю ширину; для иллюстраций, которые должны сохранять пропорции, правьте SVG в векторном редакторе.
Как работает Генератор SVG-волн
Ширина делится на равные сегменты; высота каждой точки это базовая линия плюс псевдослучайное смещение (mulberry32) по seed, масштабированное амплитудой. Плавные волны проводят через точки сплайн Катмулла-Рома, преобразованный в кубические команды Безье C; пики используют прямые линии, а ступени горизонтальные и вертикальные. Контур замыкается на нижнюю (или верхнюю) границу. Несколько слоёв используют разные базовые линии и seed, а прозрачность растёт к переднему плану. Data URI оставляет SVG читаемым и кодирует процентами только небезопасные символы.
Распространенные Случаи Использования
- Волнистые разделители между секциями лендинга
- Многослойные фоны подвала
- Нижние края секций первого экрана
- Фоновые изображения через CSS data URI
- Воспроизводимые декоративные формы в дизайн-системах
Часто Задаваемые Вопросы
Получу ли я ту же волну снова?
Да. Одинаковые настройки и seed всегда дают идентичную SVG-разметку.
Встроенный SVG или data URI?
Встроенный SVG можно стилизовать и анимировать CSS; data URI в background-image сохраняет HTML чистым, но после кодирования его нельзя перекрасить.
Как поместить волну в верхнюю часть секции?
Установите положение «Сверху»; контур замыкается на верхнюю границу и заполняет область вверх.