Генератор фонових CSS-візерунків

Більшість інструментів для «генерування візерунків» непомітно використовують одну й ту саму формулу repeating-linear-gradient для кожного варіанту й лише змінюють числа. Цей — ні: кожен із шести типів візерунків тут створено за допомогою конкретної техніки CSS, яка справді формує задану фігуру. Смуги використовують один repeating-linear-gradient із двома колірними смугами. Цятки використовують один radial-gradient, замощений виключно через background-size — класичний трюк CSS-цяток — замість repeating-radial-gradient, який не може чисто замостити круглу цятку на прямокутній сітці. Шахівниця використовує справжню чотирисекторну формулу conic-gradient: конічний градієнт із центром у квадратній плитці природно ділиться на чотири секторні квадрати на межах 90 градусів, а чергування двох кольорів у цих секторах замощується у справжню шахівницю, а не її наближення.

Сітка та діагональні перехресні лінії нашаровують два repeating-linear-gradient як окремі записи background-image, а не імітують другий напрямок за допомогою трюків із рамкою. Сітка поєднує повторюваний градієнт «вправо» і «вниз» для чітких горизонтальних і вертикальних ліній. Перехресні лінії нашаровують повторюваний градієнт під кутом +45° і -45° для діагонального переплетення у стилі кошика — варто бути точним: це чесні перехресні лінії, а не справжня геометрія «ялинки», і інструмент позначає це саме так, без перебільшень. Трикутники повторно використовують техніку чотирисекторного conic-gradient шахівниці, але градієнт починається з поворотом на 45 градусів, що зсуває межі секторів від середніх точок країв плитки до її кутів і перетворює ті самі чотири сектори на чотири трикутники від кута до кута замість чотирьох квадратних секторів.

Кожен тип візерунка показує лише ті елементи керування, які справді до нього застосовні: повзунок кута з’являється для смуг, радіус цятки та інтервал — для цяток, товщина лінії — для сітки та перехресних ліній, — а велика область попереднього перегляду перемальовується за кожної зміни, тож ви можете побачити кілька повних повторень, перш ніж зупинитися на значенні. Перемкніть режим виводу на SVG — і той самий візерунок знову з’явиться як елемент <pattern>, побудований із простих примітивів rect, circle, path або polygon, готовий до вставлення в <defs> будь-якого SVG-документа, з можливістю завантажити окремий файл .svg одним клацанням.

Усе працює локально у вашому браузері: жодних завантажень зображень, жодних звернень до сервера, жодного облікового запису. Для суцільних або градієнтних заливок без повторення краще скористатися генератором CSS-градієнтів на цьому сайті; цей інструмент призначений саме для замощуваних геометричних фонів, створених без жодних зображень.