Генератор волн SVG
Настройте размер, форму и цвет волн, чтобы создать разделители или фоны для веб-страницы. Скопируйте или сохраните SVG либо фон CSS, или сохраните изображение в PNG.
Возможности
Настройка формы и цветов
Настройте высоту и количество волн, их положение и направление заливки, а также создайте изображение в одном или двух цветах.
Получение результата в нужном формате
Копируйте и сохраняйте код SVG или фон CSS, а также сохраняйте изображение в формате PNG.
Как пользоваться
Выберите исходную форму
Изменяйте значения вручную или выберите похожую форму в разделе «Выбрать шаблон».
Настройте размер и цвета
Задайте ширину, высоту, амплитуду и число волн. В расширенных настройках измените начальное положение и высоту центра.
Создайте и проверьте SVG
Проверьте форму созданной волны и прозрачные области. После изменения настроек создайте изображение заново.
Получите результат в нужном формате
Выберите SVG или фон CSS, чтобы скопировать или сохранить их, либо сохраните PNG.
Когда пригодится
Разделение блоков страницы
Создайте волнообразные разделители между блоками содержимого или над нижним колонтитулом.
Подбор цветов для сайта
Используйте сплошной цвет или градиент, чтобы создать фон, подходящий к цветовой схеме страницы.
Формы волн и форматы сохранения
Амплитуда и число волн
Амплитуда — это величина вертикального отклонения, а число волн — количество циклов по всей ширине. Эта функция не предназначена для отображения звуковых сигналов.
Положение волны и обрезанные области
Измените начальное положение с помощью фазы, а вертикальное положение — с помощью высоты центра. Части за пределами изображения обрезаются.
Выбор между SVG и PNG
В SVG форма представлена векторной графикой. PNG сохраняет изображение с заданными размерами в пикселях и поддерживает прозрачные области.
Как разместить фон CSS
CSS задаёт фоновое изображение. Укажите ширину и высоту элемента, в котором оно будет отображаться, чтобы выделить для фона область.
Часто задаваемые вопросы
Можно ли настроить форму волны и цвета?
Можно задать значения и цвета. Выберите «Использовать два цвета», чтобы настроить второй цвет и угол градиента.
Что произойдёт с текущими настройками при выборе шаблона?
Параметры шаблона заменят текущие настройки, включая ширину, высоту и цвета. После выбора при необходимости измените значения.
Изменится ли предварительный просмотр при изменении настроек?
После внесения изменений выберите «Создать SVG», чтобы проверить результат. Предыдущий результат больше нельзя просмотреть или сохранить.
Является ли SVG точной синусоидой?
Форма волны аппроксимируется гладкой кубической кривой. Это не форма сигнала для математических измерений или анализа звука.
Работа с файлами
- Ввод
- Создание по числовым параметрам волны и цветам. Выбирать изображение не нужно.
- Результат
- Файлы wave.svg, wave.css и wave.png. SVG и CSS также можно скопировать.