Generátor CSS vzorů na pozadí

Většina nástrojů označovaných jako „generátor vzorů“ tiše recykluje tentýž vzorec repeating-linear-gradient pro každou možnost a pouze mění čísla. Tento ne: každý ze šesti zdejších typů vzorů je postaven na konkrétní CSS technice, která daný tvar skutečně vytváří. Pruhy používají jediný repeating-linear-gradient se dvěma barevnými pásy. Tečky používají jeden radial-gradient dlaždicovaný čistě pomocí background-size – klasický CSS trik pro tečky – spíše než repeating-radial-gradient, který nedokáže čistě položit kruhovou tečku na obdélníkovou mřížku. Šachovnice používá skutečný vzorec conic-gradient rozdělený do čtyř kvadrantů: kuželový gradient vycentrovaný ve čtvercové dlaždici se přirozeně rozdělí na čtyři kvadrantové čtverce v hranicích 90 stupňů a střídáním dvou barev napříč těmito kvadranty vzniká opravdová šachovnice, nikoli přiblížení.

Mřížka a diagonální křížové šrafování obě vrství dva repeating-linear-gradients jako samostatné položky background-image, místo aby druhý směr předstíraly triky s rámečky. Mřížka kombinuje opakující se gradient „doprava“ a „dolů“ pro ostré vodorovné a svislé linky. Křížové šrafování vrství opakující se gradient pod +45° a -45° a vytváří tak diagonální vazbu připomínající košíkářské pletení – stojí za to být přesný: jedná se o poctivé křížové šrafování, nikoli skutečnou geometrii rybí kosti, a nástroj to takto označuje, místo aby přeháněl. Trojúhelníky znovu využívají techniku čtyřklínového conic-gradient ze šachovnice, ale začínají s gradientem otočeným o 45 stupňů, což posune hranice klínů ze středů hran dlaždice do jejích rohů a promění tytéž čtyři klíny ve čtyři trojúhelníky jdoucí z rohu do rohu namísto čtyř kvadrantových čtverců.

Každý typ vzoru nabízí pouze ty ovládací prvky, které se k němu skutečně vztahují – posuvník úhlu se zobrazí pro pruhy, poloměr teček a rozteč pro tečky, tloušťka čar pro mřížku a křížové šrafování – a velký dlaždicový náhled se překresluje při každé změně, takže můžete vidět několik celých opakování, než potvrdíte hodnotu. Přepněte výstupní režim do SVG a tentýž vzor se znovu objeví jako element <pattern> sestavený z primitiv rect, circle, path nebo polygon, připravený k vložení do <defs> libovolného SVG dokumentu, s možností stažení samostatného .svg souboru jedním kliknutím.

Vše běží lokálně ve vašem prohlížeči: žádné nahrávání obrázků, žádné dotazování serveru, žádný účet. Pro jednolité nebo gradientní výplně bez opakování je vhodnějším nástrojem generátor CSS gradientů na těchto stránkách; tento je určen speciálně pro opakovatelná geometrická pozadí vytvořená zcela bez obrazových podkladů.