Svg-Pattern-Generator

Der SVG Pattern Generator erstellt wiederholte, gekachelte Hintergründe, indem er ein SVG-<pattern>-Element definiert, das mit einer einzelnen wiederholten Form gefüllt ist. Er bietet sechs Formtypen (Kreise, Quadrate, Dreiecke, Linien, Kreuze, Rauten), die als Kontur-Grundelemente gezeichnet werden, kachelt sie über eine 200x200-Vorschau und exportiert das vollständige SVG-Markup zur Verwendung in Webseiten, CSS-Hintergründen oder Designdateien.

1. Wählen Sie einen Mustertyp aus den sechs Schaltflächenoptionen. 2. Passen Sie den Größe-Schieberegler (10 bis 60px) an, um sowohl die Kachelabmessungen als auch den Formmaßstab festzulegen. 3. Passen Sie den Schieberegler für die Strichbreite an (0,5 bis 6,0). 4. Verwenden Sie Rotation (0 bis 360 Grad in 5-Grad-Schritten), um die Kachel über patternTransform zu drehen. 5. Legen Sie die Formfarbe und die Hintergrundfarbe über die beiden Farbfelder fest. 6. Klicken Sie auf Kopieren, um das generierte SVG in die Zwischenablage zu kopieren.

Das exportierte SVG ist 200x200 groß und enthält einen <defs><pattern>-Block mit patternUnits="userSpaceOnUse". Breite und Höhe des Musters entsprechen dem Größenwert, sodass jede Kachel in einem Raster dieser Größe wiederholt wird. Zuerst wird ein Hintergrund-<rect> gezeichnet, der mit der Hintergrundfarbe gefüllt ist, dann überlagert ein zweiter <rect>, der mit url(#pat) gefüllt ist, die Kacheln. Wenn die Rotation ungleich null ist, wird die Drehung sowohl als patternTransform auf das Muster als auch als rotate()-Transformation auf die Form selbst angewendet.