SVG Pattern – Bauernkaro

In meinem letzten Beitrag habe ich dir gezeigt, wie du wiederkehrende Muster (Pattern) mit SVG erstellen kannst. Hier siehst du verschiedene Baunernkaros die sich mit Hilfe zweier, übereinander gelegter Rechtecke erstellen lassen. Das Bauernkaro ist im englischsprachigen Raum auch unter dem Begriff Gingham-Muster oder Vichy-Muster bekannt.

Konstruktion des Musters

Die Rechtecke werden mit einer Füllfarbe ohne Rand gefüllt und mit einer Transparenz (Opacity) von 50% (0.5) versehen. Im Bereich der Überlappung entsteht durch die Transparenz das dunkle Quadrat (siehe linke Abbildung). Das einzelne Pattern findest du in der rechten Abbildung wieder.

SVG Baunerkaro animiert SVG Baunerkaro animiert

Hintergrund festlegen [fill=“url(#…)“]

Das obige Muster habe ich in einem <defs>-Element von 40 x 40 px angelegt und damit im folgenden Beispiel die Kreise mit Konturen in verschiedenen Farbvarianten gefüllt.

 

 

Code-Beispiel für blaues Bauernkaro

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="340" height="340">
 <title>Bauernkaro blau</title>
 <desc>Vichy-Muster, gingham</desc>
 <defs>
   <pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="20" height="40" stroke="none" fill="#2980b9" opacity="0.5"/>
     <rect x="0" y="0" width="40" height="20" stroke="none" fill="#2980b9" opacity="0.5"/>
   </pattern>
 </defs>
 <circle cx="170" cy="170" r="168" fill="url(#vichy)" stroke="#2980b9" stroke-width="4px"/>
</svg>

Endlose Variationsmöglichkeiten

In den folgenden Beispielen habe ich den obigen Mustern einfach weitere Fäden, farbige Linien bzw. Rechtecke mit einem Abstand vom oberen und linken Rand des Musters hinzugefügt. Die Linien sind mit einer Transparenz von 30% (0.3) versehen.

Es lassen sich aber auch andere Hintergründe wählen auf denen dann z.B. weiße oder andersfarbige Rechtecke oder Linien mit Transparenzen platzieren lassen.

Mit dem zusätzlichen Attribut patternTransform lässt sich das gesamte Muster transformieren. Im Beispiel SVG Bauernkaro Rot/Blau rotiert 45° ist das Muster aus dem vorherigen Beispiel um 45° mit rotate(45) gedreht .

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
   ...
</pattern>

oder skewX(20) | skewY(20)

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="skewX(20)">
   ...
</pattern>

mit der Funktion scale() im patternTransform-Attribut lässt sich das Muster auch skalieren.

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(3)">
   ...
</pattern>