Генератор SVG-волн
Бесплатный онлайн-генератор SVG-волн: сложите 1-5 слоёв плавных волн, настройте базовую линию, амплитуду, длину волны и плавность, примените двухцветный градиент и экспортируйте векторный код.
Что делает генератор SVG-волн?
Он создаёт декоративные волны в виде готового SVG-кода. Можно наложить от 1 до 5 слоёв, у каждого своя высота базовой линии, амплитуда, длина волны и плавность, а заполняются они общим двухцветным линейным градиентом.
Как рисуются кривые волн?
Каждый слой создаёт собственный генератор путей: волна делится на сегменты по полволны, и каждый сегмент строится кубическими контрольными точками Безье. Файл получается крошечным и идеально гладким при любом масштабе.
На что влияет ползунок плавности?
При 0% сегменты становятся прямыми линиями, и волна похожа на зигзаг. При увеличении контрольные точки Безье расходятся наружу, и на 100% получаются полноценные синусоподобные кривые.
Где можно использовать экспортированный SVG?
Везде, где допустимы HTML или SVG: фоны первых экранов, разделители между секциями страницы, подвалы, презентации и графические редакторы. Вставьте скопированный код прямо в HTML или сохраните .svg кнопкой скачивания.
Останется ли волна чёткой при любом размере?
Да. В экспорте сохраняется viewBox 1440x480, графика — чистая векторная геометрия. Растяните на 100% ширины страницы или увеличьте для печати — кривые не размыляются и не пикселизуются.
Как работает кнопка «Случайно»?
Она выбирает новое случайное число слоёв от 1 до 5, свежие случайные значения для каждого параметра и две гармоничные случайные расцветки, после чего мгновенно перерисовывает предпросмотр. Нажимайте, пока не понравится результат.
Можно ли использовать фирменные цвета?
Да. Два выбора цвета задают начальную и конечную точки линейного градиента, общего для всех слоёв, — изменив их, вы перекрашиваете всю группу волн разом.
Отправляются ли данные на сервер?
Нет. Генератор полностью работает в браузере на чистом JavaScript. Ваши цвета и настройки не покидают страницу, а экспортируемый файл создаётся локально на вашем устройстве.
Как использовать Генератор SVG-волн
Генератор SVG-волн создает многослойные волновые формы в виде чистого, готового к вставке SVG-кода. Каждый слой — плавная кубическая кривая Безье, залитая общим двухцветным линейным градиентом, что делает его идеальным для фонов hero-секций, разделителей страниц и декора подвалов. Все генерируется в вашем браузере — ничего не загружается.
- Выберите в селекторе «Слои», сколько слоев (1-5) вам нужно. Слои рисуются сзади наперед, так что каждый новый слой рисуется поверх предыдущих.
- Выберите начальный и конечный цвета градиента двумя выборщиками цвета — все слои делят этот линейный градиент.
- Тонко настройте каждый слой его четырьмя ползунками: высота базовой линии двигает волну вверх-вниз, амплитуда задает высоту гребней, длина волны управляет горизонтальным расстоянием между гребнями, а плавность смешивает от прямых зигзагов (0%) до полных синусоидальных кубических кривых Безье (100%).
- Нажмите «Случайно», чтобы мгновенно получить свежую комбинацию числа слоев, форм и цветов, пока что-то не покажется подходящим.
- Нажмите «Скачать SVG», чтобы сохранить файл .svg, или «Копировать код», чтобы поместить полную SVG-разметку в буфер обмена — готовую к вставке в любой HTML-файл или дизайнерский инструмент.
Для разделителей секций сайта поместите SVG между двумя блоками и дайте ему растянуться на 100% ширины — viewBox сохраняет кривые без искажений при любом размере. Низкая плавность с короткими длинами волн дает рисованный от руки вид, а полная плавность с длинными волнами выглядит как спокойное море.
Похожие инструменты
- Оптимизатор SVG Оптимизируйте и сжимайте SVG-файлы мгновенно в браузере. Удаляйте метаданные, комментарии и мусор редактора, уменьшая размер до 60%.
- Конвертер SVG в PNG Мгновенно конвертируйте SVG в PNG, JPEG или WebP в браузере. Настраивайте масштаб, размер и цвет фона. Бесплатно, приватно, без загрузки.
- Конвертер PNG в SVG Бесплатный онлайн конвертер PNG в SVG. Превращайте PNG, JPG и другие растровые изображения в масштабируемый векторный SVG с настройкой цвета и детализации — полностью в браузере.
- Генератор Border Radius Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор CSS easing Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
- Генератор text-shadow CSS Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
- Генератор CSS clip-path Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.