Генератор SVG-волн и разделителей

Генератор SVG-волн и разделителей

Создавайте красивые разделители секций с волнами в формате SVG для вашего веб-сайта. Выбирайте из 6 стилей волн — плавная синусоида, слоистые волны, острый зигзаг, скругленные холмы, асимметричные и органические капли — настраивайте амплитуду, частоту, цвета и слои, затем экспортируйте в виде кода SVG, CSS-фона, HTML-сниппета или загружаемого SVG-файла. Дополнительная CSS-анимация для эффектов текучих волн.

Как использовать

Выберите стиль волны из выпадающего списка и настройте элементы управления. Предварительный просмотр в реальном времени обновляется мгновенно при изменении амплитуды, частоты, ширины, высоты, количества слоев, цветов и прозрачности. Отразите по вертикали для нижних разделителей или по горизонтали, чтобы зеркально отразить направление. Включите анимацию для эффектов текучих волн. Когда результат вас устроит, используйте кнопки экспорта, чтобы скопировать код SVG, разметку CSS-фона, HTML-сниппет или загрузить SVG-файл.

Возможности

• 6 стилей волн — Плавная синусоида (классическая кривая), Слоистые волны (глубина наложения), Острый зигзаг (угловатые V-образные формы), Скругленные холмы (полукруглые выступы), Асимметричный (естественное ощущение ветра), Капля/Органический (случайные органические кривые).
• Поддержка нескольких слоев — До 4 слоев с индивидуальными настройками цвета и прозрачности. Слои имеют фазовый сдвиг для естественной глубины. Идеально подходит для разделителей в стиле градиента.
• Живой просмотр — Большой визуальный предпросмотр, показывающий волну как разделитель секции. Обновляется в реальном времени при изменении любого элемента управления. Настраиваемый цвет фона.
• Амплитуда и частота — Управляйте высотой волны (20-200px) и количеством пиков (1-10) для достижения нужной формы.
• Элементы управления отражением — Отразите по вертикали (для разделителей внизу секции) или по горизонтали (зеркальное отражение направления волны).
• CSS-анимация — Дополнительная анимация текучих волн с управлением скоростью (медленно/средне/быстро). Код анимации включается в экспорт при включении.
• 4 варианта экспорта — Скопировать код SVG (встроенный), Скопировать CSS-фон (URI данных), Скопировать HTML-сниппет (готовый к вставке разделитель секции), Загрузить SVG-файл.
• Пользовательские размеры — Установите ширину и высоту в соответствии с вашим макетом. По умолчанию 1200 × 200 подходит для большинства секций веб-сайта.

Стили волн

Плавная синусоида: Классическая синусоидальная кривая с аппроксимацией кубическими Безье. Чисто и современно.
Слоистые волны: Множественные синусоиды с фазовыми сдвигами, создающими глубину и наложение. Отлично подходит для стартовых секций.
Острый зигзаг: Угловатые V-образные пики и впадины. Смелый и геометрический.
Скругленные холмы: Полукруглые выступы для создания мягкого, покатого ландшафта.
Асимметричный: Различные амплитуды вверх/вниз для естественного, обдуваемого ветром вида.
Капля/Органический: Посеянное случайное изменение кривых для создания уникальных, органических форм. Одни и те же входные данные всегда дают одинаковый результат.