Генератор SVG-хвиль
Створюйте багатошарові SVG-фігури хвиль із налаштовуваною інтенсивністю кривої, кількістю шарів і суцільним чи градієнтним заповненням, а потім копіюйте розмітку або завантажуйте файл .svg.
Генератор SVG-хвиль — Задайте інтенсивність кривої, виберіть, скільки шарів хвиль накласти, і вкажіть суцільне заповнення чи вертикальний градієнт згори вниз із двох кольорів. Попередній перегляд перемальовується в реальному часі, поки ви змінюєте налаштування, кнопка «Згенерувати знову» перетасовує форму хвилі на основі сіду, а повна SVG-розмітка будь-якої миті готова до копіювання чи завантаження у вигляді файлу .svg. Усе створюється просто у вашому браузері; жодні налаштування чи зображення ніколи не надсилаються на сервер.
Що таке Генератор SVG-хвиль?
Генератор SVG-хвиль — це безкоштовний браузерний інструмент для вебдизайнерів і фронтенд-розробників, яким потрібні плавні органічні хвилясті роздільники та фони для hero-блоків без малювання контурів вручну. Ви задаєте інтенсивність кривої, накладаєте від одного до восьми шарів, перевертаєте хвилю, щоб її гребінь був спрямований униз або вгору, і заповнюєте її змішуванням одного кольору чи вертикальним градієнтом між двома HEX-кольорами. Кожна хвиля будується генератором псевдовипадкових чисел на основі сіду, тож натискання «Згенерувати знову» дає свіжу форму за тих самих налаштувань, а результат — точний, масштабований SVG, який можна вставити в будь-яку HTML-сторінку чи файл дизайну. Використовуйте його для роздільників секцій, підвалів, банерів і декоративних фонів.
Як користуватися Генератор SVG-хвиль
- Задайте інтенсивність кривої від 0 до 100, щоб керувати тим, наскільки високими та виразними будуть гребені хвилі.
- Виберіть кількість шарів (1-8); що більше шарів, то більше напівпрозорих хвиль накладається для глибини.
- Скористайтеся «Перевернути», щоб гребінь хвилі був спрямований униз або вгору.
- Відкрийте «Налаштування», щоб перемикатися між суцільним заповненням і вертикальним градієнтом та вибрати початковий і кінцевий кольори.
- Натисніть «Згенерувати знову», щоб перетасовувати форму хвилі, доки вона вам не сподобається.
- Скопіюйте SVG-розмітку або натисніть «Завантажити», щоб зберегти файл wave.svg.
Приклади
Градієнтний роздільник секцій
Задайте інтенсивність близько 50, залиште 3 шари, виберіть градієнтне заповнення від синього до фіолетового та завантажте wave.svg, щоб вставити плавний роздільник між двома секціями сторінки.
Виразна одноколірна hero-хвиля
Збільште інтенсивність, поставте 1 шар, перемкніться на суцільне заповнення та переверніть хвилю вгору, щоб отримати великий ефектний гребінь за hero-заголовком.
Багатошаровий фон підвалу
Використайте 5-6 шарів із низькою чи середньою інтенсивністю, щоб побудувати мʼяку складену напівпрозору хвилю, яка добре виглядає як фон підвалу.
Поширені запитання
- Що змінює інтенсивність кривої?
- Інтенсивність (0-100) керує тим, наскільки високо піднімається й опускається кожен гребінь хвилі. Низькі значення дають мʼякі брижі; високі — високі, виразні піки. Попередній перегляд і SVG оновлюються миттєво під час зміни.
- Чому натискання «Згенерувати знову» змінює форму?
- Кожна хвиля малюється генератором псевдовипадкових чисел на основі сіду. «Згенерувати знову» збільшує сід, тож ви отримуєте нове розташування гребенів, при цьому інтенсивність, шари, кольори та заповнення лишаються саме такими, як ви їх задали.
- У чому різниця між суцільним і градієнтним заповненням?
- Суцільне змішує кожен накладений шар між двома вашими кольорами, а градієнт застосовує єдиний вертикальний градієнт від першого кольору вгорі до другого внизу по всіх шарах. Відкрийте «Налаштування», щоб перемкнутися та вибрати обидва кольори.
- Як використати завантажений SVG?
- Результат — стандартна, масштабована SVG-розмітка. Скопіюйте її прямо у свій HTML або завантажте wave.svg та імпортуйте у свій інструмент дизайну чи підключіть як зображення. Оскільки це вектор, він лишається чітким за будь-якого розміру.
- Чи завантажується щось на сервер?
- Ні. Хвиля створюється повністю у вашому браузері за допомогою локальних обчислень, а завантаження .svg формується з blob у памʼяті. Жодні налаштування, кольори чи зображення ніколи не залишають ваш пристрій, тож інструмент працює офлайн і зберігає вашу роботу конфіденційною.
Схожі інструменти
Код у зображення
Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.
Перевірка контрастності кольорів
Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.
Змішувач кольорів
Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.
Генератор відтінків кольору
Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.