Инструмент собирает узор в виде обычной SVG-разметки, поэтому результат остаётся чётким при любом масштабе и плотности экрана и обычно весит всего пару сотен байт, намного меньше PNG-плитки. Скопируйте CSS, чтобы вставить повторяющийся background-image прямо в таблицу стилей, или скачайте отдельный SVG-файл как готовый ассет. Ничего из созданного никуда не уходит: узор рисуется целиком на вашем устройстве и продолжает работать офлайн после загрузки страницы.
Генератор SVG-узоров онлайн
Работает прямо в браузере - без загрузки файлов и регистрации.
Узор
Стиль
Передний план
Фон
Что такое генератор SVG-узоров?
Генератор SVG-узоров собирает бесшовный повторяющийся фон из геометрических фигур: точек, линий, сеток, зигзагов. Вы выбираете форму, цвета, размер плитки и толщину линий, а на выходе получаете крошечный, не зависящий от разрешения SVG и готовый CSS-код для вставки. Всё создаётся в браузере, поэтому ничего не отправляется на сервер.
Как пользоваться
- 1Выберите узор. Возьмите форму из образцов: точки, кольца, сетка, диагональ, штриховка крест-накрест, плюс, зигзаг и другие.
- 2Настройте цвет и форму. Выберите цвет переднего плана и фона (или сделайте фон прозрачным), затем настройте размер, толщину и прозрачность - превью обновляется вживую.
- 3Скопируйте или скачайте. Переключайтесь между вкладками CSS и SVG, копируйте код или скачайте отдельный файл .svg для использования где угодно.
Кому пригодится
- Веб-разработчики, которым нужна лёгкая фоновая текстура для хиро-блока, карточки или секции без загрузки файла изображения.
- UI- и бренд-дизайнеры, прототипирующие бесшовные текстуры в фирменных цветах и экспортирующие их как чёткий SVG.
- Авторы писем и презентаций, которым нужен небольшой стыкуемый узор, чётко отображающийся на любом экране.
- Студенты и энтузиасты, изучающие работу SVG-элемента
<pattern>и CSS-тайлинга фона, меняя значения и наблюдая за результатом. - Авторы контента, которым нужен быстрый декоративный фон для превью, баннеров и макетов.
Вопросы и ответы
Генератор SVG-узоров бесплатный?
Да, он полностью бесплатный, без регистрации и без ограничений. Каждый узор создаётся в браузере, поэтому можно делать и копировать сколько угодно, даже офлайн после загрузки страницы.
Узоры действительно бесшовные?
Да. Каждая фигура рисуется так, чтобы её края точно совпадали с соседней плиткой, а узор повторяется по фиксированной сетке. И CSS-background-image, и SVG-элемент <pattern> стыкуют одну и ту же ячейку край в край без видимых швов.
Что использовать - CSS или SVG?
CSS подходит, чтобы сразу вставить повторяющийся фон в таблицу стилей - это самый быстрый вариант для сайта. SVG-файл нужен, когда требуется отдельный ассет: например, изображение, файл для дизайн-инструмента или прямая вставка в HTML.
Зачем нужен SVG-узор вместо PNG?
SVG векторный, поэтому остаётся идеально чётким при любом масштабе и плотности экрана и никогда не пикселизируется. Геометрическая SVG-плитка обычно весит всего пару сотен байт - намного меньше эквивалентного PNG, а цвета можно менять в любой момент без повторного экспорта.
Можно ли сделать фон прозрачным?
Да. Включите опцию «Прозрачный», и заливка фона убирается - узор показывает только фигуры переднего плана. Это позволяет накладывать узор поверх уже существующего цвета, изображения или градиента.
Мой дизайн куда-то загружается?
Нет. Весь узор строится локально в браузере из обычной SVG-разметки, и ничего не отправляется на сервер, поэтому цвета и настройки остаются только на вашем устройстве.