Генератор 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.