Генератор хвиль 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 також можна скопіювати.