SVG-mønstergenerator

SVG Pattern Generator lager repeterende flislagte bakgrunner ved å definere et SVG <pattern>-element fylt med en enkelt repetert form. Den tilbyr seks formtyper (sirkler, firkanter, trekanter, linjer, kors, diamanter) tegnet som omriss-primitiver, flislegger dem deretter over en 200x200-forhåndsvisning og eksporterer den komplette SVG-markeringen for bruk i nettsider, CSS-bakgrunner eller designfiler.

1. Velg en Pattern Type fra de seks knappene. 2. Juster Size-glideren (10 til 60px) for å sette både flisdimensjonene og formskalaen. 3. Juster Stroke Width-glideren (0.5 til 6.0). 4. Bruk Rotation (0 til 360 grader, i 5-graders trinn) for å rotere flisen via patternTransform. 5. Sett Shape Color og Background Color med de to fargevelgerne. 6. Klikk Copy for å kopiere den genererte SVG-en til utklippstavlen.

Den eksporterte SVG-en er 200x200 med en <defs><pattern>-blokk som bruker patternUnits="userSpaceOnUse". Mønsterets bredde og høyde er lik Size-verdien, så hver flis gjentas i et rutenett av den størrelsen. En bakgrunns-<rect> fylt med Background Color tegnes først, deretter legges en andre <rect> fylt med url(#pat) over flisene. Når Rotation er ulik null, brukes rotasjonen både som en patternTransform på mønsteret og som en rotate()-transform på selve formen.