Generator ozadja vzorcev CSS

Večina orodij za "generator vzorcev" tiho ponovno uporabi isto ponavljajočo se formulo linearnega gradienta za vsako možnost in samo spremeni številke. Ta ne: vsaka od šestih vrst vzorcev je zgrajena iz posebne tehnike CSS, ki dejansko ustvari to obliko. Črte uporabljajo en sam ponavljajoči se linearni gradient z dvema barvnima pasovoma. Pike uporabljajo en radialni gradient, razporejen izključno glede na velikost ozadja – klasični trik s pikami CSS – namesto ponavljajočega se radialnega gradienta, ki ne more čisto razporediti krožne pike na pravokotni mreži. Šahovnica uporablja pravo formulo stožčastega gradienta štirih kvadrantov: stožčasti gradient s središčem v kvadratni ploščici se naravno razdeli na štiri kvadrantne kvadrate na 90-stopinjskih mejah in izmenjuje dve barvi v teh ploščicah kvadrantov v pravo šahovnico, ne v približek.

Mreža in diagonala zasrahujeta oba sloja dveh ponavljajočih se linearnih gradientov kot ločena vnosa slike ozadja, namesto da bi lažno ponaredili drugo smer z obrobnimi triki. Mreža združuje ponavljajoči se preliv "na desno" in "navzdol" za jasne vodoravne in navpične črte. Prečna šrafura nanese ponavljajoče se gradiente +45 in -45 stopinj za diagonalno tkanje v slogu košarastega tkanja — vredno je biti natančen: to je poštena prečna šrafura, ne prava geometrija ribje kosti, in orodje jo označi tako, namesto da bi preglasilo. Trikotniki ponovno uporabljajo tehniko stožčastega gradienta šahovnice s štirimi klini, vendar začnejo gradient zavrteti za 45 stopinj, kar premakne meje klinov od središč robov ploščice do njenih vogalov in spremeni iste štiri kline v štiri trikotnike od kota do kota namesto v štiri kvadrantne kvadrate.

Vsaka vrsta vzorca izpostavi samo kontrolnike, ki dejansko veljajo zanjo – kotni drsnik se prikaže za črte, radij in razmik pike se prikažeta za pike, debelina črte se prikaže za mrežo in šrafuro – in veliko polje za predogled s ploščicami se prebarva ob vsaki spremembi, tako da lahko vidite več polnih ponovitev, preden se zavežete vrednosti. Obrnite izhodni način na SVG in isti vzorec se znova pojavi kot element <pattern>, zgrajen iz navadnih pravokotnic, krogov, poti ali mnogokotnikov, pripravljenih za lepljenje v <defs> katerega koli dokumenta SVG, s prenosom samostojne datoteke .svg z enim klikom.

Vse se izvaja lokalno v vašem brskalniku: brez nalaganja slik, brez povratnega obiska strežnika, brez računa. Za polna ali gradientna polnila brez ponavljanja je namesto tega pravo orodje generator gradientov CSS na tem mestu; ta je posebej za popločljiva geometrijska ozadja, zgrajena iz nič slikovnih sredstev.