Готовый фоновый узор за пару кликов: выберите из библиотеки или соберите свой. Плитка повторяется без стыков, а забрать её можно в SVG, PNG или сразу кодом для CSS.
Цвета
Фигура
Фон
Готовые паттерны
Тяните фигуры мышью или пальцем. Фигура у края сама дорисуется с другой стороны — так плитка остаётся бесшовной.
Слои
Выбранная фигура
Паттерн — это маленькая картинка-плитка, которая повторяется по горизонтали и вертикали и складывается в сплошной узор. Бесшовной её делает одна деталь: фигура, выходящая за край плитки, дорисовывается с противоположной стороны. Поэтому стыков не видно, сколько бы раз плитку ни повторили — можно замостить хоть весь экран.
Выгода в весе. Фон целой страницы весит столько же, сколько одна плитка, — обычно пара килобайт в SVG. Фотография того же фона потянула бы на сотни килобайт и всё равно размылась бы на большом экране.
Отсюда и применение: фоны сайтов и лендингов, подложки для презентаций и обложек, текстуры в макетах, заливка для печати, узор для упаковки или ткани.
Быстрый путь — выбрать готовый из библиотеки и покрутить цвета: раздел с готовыми паттернами разбит на геометрию, орнаменты, линии и абстракцию.
Дальше настраиваются четыре вещи. Размер задаёт величину фигур, плотность — сколько их на плитке, поворот разворачивает все элементы разом, плитка меняет шаг повтора: чем она меньше, тем чаще виден раппорт, чем больше — тем спокойнее рисунок.
Если нужно точнее, откройте «Тонкую настройку». Там каждая фигура — отдельный слой: её можно передвинуть мышью, изменить размер, поворот, прозрачность и цвет по отдельности. Карандаш позволяет нарисовать собственный контур — он станет обычной фигурой паттерна.
SVG — основной выбор для веба и макетов: узор остаётся чётким на любом экране и весит считаные килобайты. Открывается в Figma, Illustrator, Inkscape и любом браузере.
CSS — готовое правило с background-image и background-size: скопировали, вставили в стиль блока, фон на месте. Отдельная вкладка отдаёт то же самое в виде класса для Tailwind.
PNG нужен там, где векторы не принимают — часть конструкторов сайтов, редакторы презентаций, некоторые печатные шаблоны. Помните, что PNG-плитка не тянется без потери чёткости, поэтому берите её крупнее, чем кажется нужным.
Ссылка «Поделиться» кладёт все настройки прямо в адрес: можно отправить коллеге или сохранить себе, чтобы вернуться к варианту позже.
Паттерн правда бесшовный?
Да, и это видно прямо на странице: узор наверху показан не одной плиткой, а замощением — так же, как он ляжет на фон. Фигуры, пересекающие край, дорисовываются с противоположной стороны.
Можно ли использовать в коммерческих проектах?
Да. Узор собирается у вас в браузере из простых геометрических фигур и принадлежит вам. Водяных знаков и ограничений нет.
Как поставить узор на фон сайта?
Откройте «Ещё» → вкладку CSS и скопируйте правило — там уже прописаны и картинка, и размер плитки. Вставьте в стиль нужного блока или в body.
Данные уходят на сервер?
Нет. Паттерн рисуется и собирается прямо в браузере, никуда не отправляется и нигде не сохраняется.
Почему узор выглядит слишком пёстрым?
Обычно виноваты плотность и размер: много крупных фигур на маленькой плитке дают рябь. Уменьшите плотность, увеличьте плитку или возьмите палитру поспокойнее — фон не должен спорить с содержимым поверх него.
Что делать, если нужен узор из своей фигуры?
В «Тонкой настройке» нажмите карандаш и обведите нужную форму мышью или пальцем. Контур упростится и станет обычной фигурой — с цветом, размером и поворотом наравне с остальными.