Generator ozadij z vzorci CSS

Večina orodij za »generiranje vzorcev« tiho uporablja isto formulo ponavljajočega linearnega preliva za vsako možnost in le spreminja številke. To orodje tega ne počne: vsaka od šestih vrst vzorcev je tukaj zgrajena s specifično tehniko CSS, ki dejansko ustvari to obliko. Črte uporabljajo en sam ponavljajoč linearni preliv z dvema barvnima pasovoma. Pike uporabljajo en radialni preliv, položen izključno prek lastnosti background-size – klasičen trik s pikami CSS – namesto ponavljajočega radialnega preliva, ki ne more čisto položiti okrogle pike na pravokotno mrežo. Šahovnica uporablja pravo formulo štirikvadrantnega stožčnega preliva: stožčni preliv, centriran v kvadratni ploščici, se naravno razdeli na štiri kvadrantne kvadrate na 90-stopinjskih mejah, izmenjujoče se barve čez te kvadrante pa tvorijo pristno šahovnico, ne približka.

Mreža in diagonalna križna šrafura obe plastita dva ponavljajoča linearna preliva kot ločena vnosa slike ozadja, namesto da bi ponarejali drugo smer s triki z obrobami. Mreža združuje ponavljajoč preliv »proti desni« in »proti dnu« za ostre vodoravne in navpične črte. Križna šrafura plasti ponavljajoč preliv pod kotom +45° in -45° za diagonalno tkanje v stilu košarastega prepleta – vredno je biti natančen: to je iskrena križna šrafura, ne prava geometrija ribje kosti, in orodje jo tako tudi označuje, namesto da bi pretiravalo. Trikotniki ponovno uporabijo tehniko štirih kliničnih stožčnih prelivov iz šahovnice, vendar začnejo preliv zasukan za 45 stopinj, kar premakne meje klinov od središč robov ploščice na njene vogale in spremeni iste štiri kline v štiri trikotnike od vogala do vogala namesto štirih kvadrantnih kvadratov.

Vsaka vrsta vzorca izpostavi le tiste kontrole, ki zanjo dejansko veljajo – drsnik za kot se prikaže za črte, polmer pike in razmik za pike, debelina črte za mrežo in križno šrafuro – veliko okno s položenim predogledom pa se ob vsaki spremembi osveži, tako da lahko vidite več polnih ponovitev, preden se odločite za vrednost. Preklopite izhodni način v SVG in isti vzorec se ponovno prikaže kot element <pattern>, zgrajen iz navadnih osnovnih likov rect, circle, path ali polygon, pripravljen za lepljenje v <defs> katerega koli dokumenta SVG, z možnostjo prenosa samostojne datoteke .svg z enim klikom.

Vse deluje lokalno v vašem brskalniku: brez nalaganja slik, brez povratnega klica na strežnik, brez računa. Za enobarvna ali prelivna polnila brez ponavljanja je pravo orodje generator prelivov CSS na tem spletnem mestu; to orodje pa je posebej namenjeno ponavljajočim geometrijskim ozadjem, zgrajenim brez slikovnih datotek.