SVG mønstergenerator

SVG Pattern Generator opretter gentagne flisebelagte baggrunde ved at definere et SVG <pattern>-element udfyldt med en enkelt gentaget form. Den tilbyder seks formtyper (cirkler, kvadrater, trekanter, linjer, kors, diamanter) tegnet som omriss-primitiver, og fliselægger dem derefter over et 200x200-eksempel og eksporterer den komplette SVG-markup til brug i websider, CSS-baggrunde eller designfiler.

1. Vælg en Pattern Type fra de seks knapvalg. 2. Juster skyderen Size (10 til 60 px) for at angive både flisedimensionerne og formens skala. 3. Juster skyderen Stroke Width (0,5 til 6,0). 4. Brug Rotation (0 til 360 grader, i trin på 5 grader) til at rotere flisen via patternTransform. 5. Indstil Shape Color og Background Color ved hjælp af de to farveprøver. 6. Klik på Copy for at kopiere den genererede SVG til din udklipsholder.

Den eksporterede SVG er 200x200 med en <defs><pattern>-blok, der bruger patternUnits="userSpaceOnUse". Mønsterets bredde og højde er lig med Size-værdien, så hver flise gentages på et gitter af den størrelse. En baggrunds-<rect> udfyldt med Background Color tegnes først, derefter overlejres fliserne af en anden <rect> udfyldt med url(#pat). Når Rotation er forskellig fra nul, anvendes rotationen både som en patternTransform på mønsteret og som en rotate()-transformering på selve formen.