SVG Patroongenerator

De SVG-patroongenerator maakt herhalende getegelde achtergronden door een SVG-<pattern>-element te definiëren dat is gevuld met één herhaalde vorm. Het biedt zes vormtypen (cirkels, vierkanten, driehoeken, lijnen, kruisen, ruiten) die als contourprimitieven worden getekend, tegelt ze over een 200x200-voorbeeld en exporteert de volledige SVG-opmaak voor gebruik in webpagina's, CSS-achtergronden of ontwerpbestanden.

1. Kies een Patroontype uit de zes knopopties. 2. Pas de schuifregelaar voor Grootte aan (10 tot 60px) om zowel de tegelafmetingen als de schaalfactor van de vorm in te stellen. 3. Pas de schuifregelaar voor Strreekbreedte aan (0,5 tot 6,0). 4. Gebruik Rotatie (0 tot 360 graden, in stappen van 5 graden) om de tegel te draaien via patternTransform. 5. Stel de Vormkleur en Achtergrondkleur in met behulp van de twee kleurstaaltjes. 6. Klik op Kopiëren om de gegenereerde SVG naar het klembord te kopiëren.

De geëxporteerde SVG is 200x200 met een <defs><pattern>-blok dat patternUnits="userSpaceOnUse" gebruikt. De breedte en hoogte van het patroon zijn gelijk aan de Grootte-waarde, zodat elke tegel herhaalt op een raster van die grootte. Eerst wordt een achtergrond-<rect> getekend die is gevuld met de Achtergrondkleur, daarna overlapt een tweede <rect> gevuld met url(#pat) de tegels. Wanneer Rotatie niet nul is, wordt de rotatie zowel toegepast als een patternTransform op het patroon als een rotate()-transformatie op de vorm zelf.