Генератор фонового узора для hero-секции

Создайте повторяющийся геометрический узор для фона hero-секции, баннера или шапки сайта: несколько стилей и полностью настраиваемый цвет.

Предпросмотр

Как это работает

Инструмент строит SVG-узор с помощью элемента <pattern>, который автоматически повторяется по всей поверхности: вы рисуете всего одну ячейку узора (крест, круг, шеврон…), а SVG сам повторяет её без видимых швов, каким бы ни был итоговый размер закрываемой области.

Как встроить этот узор прямо в сайт без файла изображения?

Скопируйте сгенерированный SVG-код и вставьте его прямо в HTML либо закодируйте его в data-URI и используйте как CSS-свойство background-image: узор остаётся чётким при любом разрешении экрана и не требует дополнительного сетевого запроса для загрузки отдельного изображения.

Подстраивается ли узор, если изменить размер hero-секции?

Если вы используете SVG как background-image со значением background-repeat: repeat, узор автоматически повторяется и покрывает всю ширину секции, какой бы ни была её фактический размер на странице, — файл заново генерировать не нужно.

Генерация на 100% локально: SVG-узор создаётся целиком в вашем браузере, данные на сервер не отправляются.