SVG-mönstergenerator

SVG Pattern Generator skapar upprepade mönsterbakgrunder genom att definiera ett SVG-<pattern>-element fyllt med en enda upprepad form. Den erbjuder sex formtyper (circles, squares, triangles, lines, crosses, diamonds) ritade som konturprimitiver, plattar sedan ut dem över en 200x200-förhandsvisning och exporterar den kompletta SVG-markupen för användning i webbsidor, CSS-bakgrunder eller designfiler.

1. Välj en mönstertyp bland de sex knappvalen. 2. Justera Size-reglaget (10 till 60px) för att ställa in både plattans dimensioner och formens skala. 3. Justera Stroke Width-reglaget (0,5 till 6,0). 4. Använd Rotation (0 till 360 grader, i steg om 5 grader) för att rotera plattan via patternTransform. 5. Ställ in Shape Color och Background Color med de två färgrutorna. 6. Klicka på Copy för att kopiera den genererade SVG:en till urklipp.

Den exporterade SVG:en är 200x200 med ett <defs><pattern>-block som använder patternUnits="userSpaceOnUse". Mönstrets bredd och höjd är lika med Size-värdet, så varje platta upprepas i ett rutnät av den storleken. En bakgrunds-<rect> fylld med Background Color ritas först, sedan läggs en andra <rect> fylld med url(#pat) ovanpå plattorna. När Rotation inte är noll tillämpas rotationen både som en patternTransform på mönstret och som en rotate()-transform på själva formen.