Генератор SVG-візерунків
Створіть безшовний фоновий SVG-візерунок із вибраною фігурою, кольорами переднього плану й тла та регульованим масштабом, потім скопіюйте SVG або CSS і завантажте файл.
Генератор SVG-візерунків — Виберіть форму візерунка, як-от крапки, сітку, смуги, діагональні лінії чи шахівницю, задайте кольори переднього плану й тла та налаштуйте масштаб плитки й товщину ліній. Живий перегляд замощує візерунком область, а готова розмітка SVG або правило CSS background відображаються для копіювання одним клацанням чи завантаження. Усе працює повністю у вашому браузері; жодні кольори, код чи файли ніколи не надсилаються на сервер.
Що таке Генератор SVG-візерунків?
Генератор SVG-візерунків — це безкоштовний браузерний інструмент для вебдизайнерів і фронтенд-розробників, яким потрібне легке повторюване тло без відкриття графічного редактора. Ви вибираєте візерунок зі спадного списку (крапки, сітка, смуги, діагональ, шахівниця), задаєте колір переднього плану для фігур і колір тла для плитки та за допомогою числових полів масштабу й товщини керуєте розміром плитки й товщиною обведення. Результат — одна плитка, намальована як чіткий SVG і розрахована на безшовне повторення, тож розміри файлів залишаються крихітними, а візерунок масштабується без розмиття. Скористайтеся перемикачем Формат, щоб перемикати копійований вивід між чистою розміткою SVG і правилом CSS background-image, потім скопіюйте його або завантажте файл .svg для сайтів, карток, hero-секцій і макетів інтерфейсу.
Як користуватися Генератор SVG-візерунків
- Виберіть візерунок зі спадного списку: Крапки, Сітка, Смуги, Діагональ або Шахівниця.
- Введіть або виберіть колір переднього плану для фігур і колір тла для плитки.
- Задайте числові поля Масштаб (розмір плитки в пікселях) і Товщина (радіус крапки або товщина лінії).
- Відкрийте Налаштування й скористайтеся перемикачем Формат, щоб перемикати вивід між SVG і CSS.
- Спостерігайте, як живий перегляд замощує візерунок, потім скопіюйте SVG або CSS чи натисніть Завантажити, щоб зберегти файл .svg.
Приклади
Тло в горошок
Виберіть Крапки, задайте невеликий масштаб, наприклад 24px, і товщину 3, зі світлим кольором крапки на темному тлі плитки, щоб отримати рівномірну текстуру в горошок.
Креслярська сітка
Виберіть Сітку з масштабом 40px і тонкою товщиною 1px, блідим кольором лінії на темно-синьому тлі — для тла сторінки у стилі технічного креслення.
Діагональні CSS-смуги
Виберіть Діагональ, перемкніть перемикач Формат на CSS і скопіюйте згенероване правило background-image з background-repeat: repeat прямо у свою таблицю стилів.
Поширені запитання
- Які візерунки я можу створити?
- Пʼять безшовних візерунків: крапки, сітка, смуги, діагональні лінії та шахівниця. Кожен намальований як одна невелика SVG-плитка, що повторюється без швів, тож залишається чітким за будь-якого розміру й зберігає крихітний файл.
- Що задають Масштаб і Товщина?
- Масштаб — це розмір однієї плитки в пікселях, який визначає, наскільки далеко одна від одної розташовані повторювані фігури. Товщина — це радіус крапки або товщина лінії всередині плитки. Товщина автоматично обмежується відносно масштабу, тож візерунок ніколи не переповнює плитку.
- Яка різниця між виводом SVG і CSS?
- SVG дає чисту розмітку для окремого файлу .svg або вбудовування в код. CSS дає правило background-image, що використовує data URI плюс background-repeat: repeat, готове для вставлення в таблицю стилів. Скористайтеся перемикачем Формат у Налаштуваннях, щоб перемикатися між ними.
- Чи можна вибирати кольори візуально замість введення HEX?
- Так. Натисніть на зразок кольору поряд із полем переднього плану чи тла, щоб відкрити вбудовану палітру браузера, або введіть значення HEX, наприклад #4f86f7, напряму. Перегляд і вивід оновлюються в міру ваших змін.
- Чи завантажуються мої кольори або файли кудись?
- Ні. Візерунок повністю будується у вашому браузері як рядок 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.