Генератор SVG-хвиль
Створюйте багатошарові SVG-хвилі з налаштуванням амплітуди, складності, плавності та кольорів. Копіюйте SVG або CSS чи завантажуйте SVG і PNG.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяБагатошарові SVG-хвилі для сучасних макетів
Хвилясті роздільники — популярний спосіб пом'якшити межу між двома розділами вебсторінки. Замість різкої горизонтальної лінії вигнутий край додає руху та глибини головним банерам, футерам, таблицям цін і лендингам. Цей генератор SVG-хвиль створює такі фігури за вас. Він накладає кілька напівпрозорих або суцільних шарів, кожен зі своєю випадковою кривою, і змішує їх між двома кольорами, тож результат нагадує пагорби або водну гладь.
Оскільки результат — це звичайний SVG, він залишається чітким за будь-якого розміру, важить лише кілька сотень байтів і його можна стилізувати, анімувати або вбудувати безпосередньо в HTML. Також його можна скопіювати як CSS data URI для background-image, що зручно, коли до проєкту не можна додати окремі файли.
Що змінюють елементи керування
Шари визначають, скільки хвиль, що перекриваються, буде намальовано — від однієї чистої кривої до шести накладених смуг. Амплітуда керує висотою гребенів і западин. Складність — це кількість гребенів по ширині: малі значення дають довгі ліниві хвилі, великі — неспокійне море. Плавність визначає, як з'єднуються точки: за 0% хвиля кутаста, як зигзаг, а за 100% стає округлою кривою з кубічних сегментів Bézier. Заливка може бути поєднанням двох суцільних кольорів, по одному на шар, або горизонтальним градієнтом із прозорістю, що зменшується до переднього плану.
Використання та експорт хвилі
Кожна хвиля генерується з числового seed, тому дизайн повністю відтворюваний: запишіть seed і значення повзунків — і згодом ви зможете створити його знову. Використовуйте Відобразити вертикально для хвиль, що звисають із верхнього краю розділу, і вмикайте прозоре тло, коли SVG має лежати поверх іншого кольору. Завантажте SVG для вебу або експортуйте PNG розміром 1440 на 480 пікселів для презентацій і дизайн-інструментів. Розміщуючи SVG на сторінці, розтягніть його на всю ширину й задайте тлу розділу той самий колір, що й тло хвилі, щоб уникнути тонких швів. Усе обчислюється локально у вашому браузері, тож жодних завантажень і жодного облікового запису.
Як користуватися
- Сформуйте хвиліНалаштуйте кількість шарів, амплітуду, складність і плавність, доки криві не виглядатимуть як треба.
- Оберіть кольориВиберіть два кольори та суцільну чи градієнтну заливку, потім задайте тло або зробіть його прозорим.
- Згенеруйте випадковоНатисніть «Випадково» або введіть seed, щоб переглянути варіації, і використайте «Відобразити», щоб перенести хвилі вгору.
- ЕкспортуйтеСкопіюйте SVG або CSS-фон чи завантажте хвилю як файл SVG або PNG.