Generator Wzorców

Geometryczne i organiczne wzorce tła CSS/SVG.

Styl wzoru

KropkiSiatkaPaskiFale

Kolor wzoru

Kolor tła

Rozmiar wzoru40px

Promień kropki4px

Krycie wzoru30%

Renderowanie wzoru w czasie rzeczywistym przy użyciu wysoce wydajnych wbudowanych SVG. Responsywny i idealnie wyrównany.

Kod tła CSS

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

Surowy kod XML SVG

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>

Jak to działa

Wzory są generowane proceduralnie i kafelkują się bezszwowo; ręcznie rysowane, nieregularne tekstury są poza zakresem.
Bardzo gęste wzory zwiększają rozmiar SVG — utrzymuj umiarkowaną gęstość dla lekkich teł.

Tak — kafelkują się bez widocznych szwów, więc mogą czysto wypełnić tło dowolnego rozmiaru.

Wbudowany CSS jest najszybszy do tła strony; surowy SVG daje samodzielny zasób, który możesz edytować lub użyć ponownie gdzie indziej.

Nie. Wzory są generowane w całości w Twojej przeglądarce.