Veröffentlicht am

SVG Pattern – Flechtwerk

SVG Pattern Flechtwerk animiertSonntagabend und wieder ein neues SVG-Pattern. Die Konstruktion ist recht einfach. Auf einem 150 x 150 Pixel großen Pattern wird ein Quadrat von 150 x 150 Pixeln angelegt. Dieses Quadrat bildet den Vordergrund. Auf dem Quadrat werden vier weitere Quadrate von 25 x 25 Pixeln angelegt. Diese vier Quadrate bilden den Hintergrund. Die darüber gezeichneten Linienelemente (Breite: 2px) deuten die Kreuzungen des Musters an. Die Linien, die auf auf dem Rand des Musters liegen sind in doppelter Strichstärke (4px) angelegt. Die Dreiecke mit der gleichen Farbe der Linien und einer Deckung von 30% (opacity=“0.3″) verstärken den dreidimensionalen Effekt des Musters.

SVG Pattern Flechtwerk

Veröffentlicht am

SVG Pattern – Flechtmuster Wabe

In diesem Beitrag siehst du ein typisches Wabenflechtmuster eines Stuhls. Ich habe mir das Muster angesehen und danach ein Pattern in SVG konstruiert. Das dargestellte Muster habe ich in der linken Abbildung auf 50% verkleinert und damit das Quadrat gefüllt. Im rechten Quadrat habe ich die Transparenz auf 50% reduziert und das originale Pattern im Quadrat platziert.

SVG Pattern Wabenmuster

Wenn du dir das Muster ansehen möchtest, kannst du dir Abbildung mit rechten Maustaste in einem neuen Tab oder Fenster ansehen und dort in den Quelltext schauen.

Beispiel auf Codepen.io

See the Pen Comb seamless repeating pattern by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

SVG Pattern – 3D Webmuster

Im dargestellten Beispiel siehst du das durch die Animation herausgehobene 3D Webmuster, das sich nahtlos wiederholt. Weiter unten habe ich das Muster mit Hilfe des transformPattern-Attributes und der Funktion rotate() gedreht und mit anderen Farben gefüllt. Das Muster ist darüber hinaus mit der Funktion scale() im transformPattern-Attribute um den Faktor 2 von 120x80px auf 240x160px vergrößert.

SVG 3D weaving pattern

Hinweis: Mit einem Rechtsklick auf die Abbildung kannst du die SVG-Datei in einem eigenen Tab öffnen und dir dort den Quelltext des Musters ansehen.

Farbvariationen mit Drehungen/Skalierungen [transformPattern=“rotate(x) scale(x)“]

 

SVG 3D weaving pattern red 90°

SVG 3D weaving pattern yellow 270°

Beispiel auf Codepen.io

In meinem Beispiel auf codepen.io habe ich zwei Slider implementiert. Dort kannst du das Muster über zwei Slider rotieren und/oder skalieren.

See the Pen SVG 3D seamless weaving pattern by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

SVG Pattern – Muster aus Viertel- und Halbkreisen animiert

In diesem Beispiel siehst du Muster aus Viertelkreisen. Die dargestellten Kreise sind mit den Mustern gefüllt und animiert. Mit der Animation möchte ich die zeigen, wie die Muster rotiert aussehen würden. In diesem Beispiel war es aber einfacher die Kreise zu rotieren zu lassen, weil sich das Attribut transformPattern nicht animieren lässt. Am Effekt ändert sich dadurch aber nichts.

SVG Pattern aus drei Viertelkreisen

Die verschiedenen Drehrichtungen werden einfach dadurch erzeugt, dass im linken Kreis die Animation von 0° bis 360° läuft und im rechten Kreis von 360° bis 0°. Mit dem Attribut repeatCount=“indefinite“ rotieren die Kreise ununterbrochen.

SVG Pattern Viertelkreise animiert
Animierte Kreise mit Füllmuster aus drei Viertelkreisen

Variationen mit mehr Kreisen

Im folgenden Beispiel habe ich das obige Muster um weitere Vollkreise über die Ecken des Musters erweitert. Der gefüllte Punkt ist ein Kreis ohne Kontur mit eine Radius r=4. Der innere Vollkreis hat seinen Ursprung ebenfalls in den vier Ecken des Musters, ohne Füllung aber wieder mit einer orange gefärbten Kontur (Stroke) von 3px Stärke. Die SVG-Quellen kannst du dir über die Funktion Entwicklermodus deines Browsers ansehen oder indem du die Grafik einfach in einem neuen Tab anzeigen lässt und dann auf Seitenquelltext anzeigen gehst. Über das Attribut transfromPattern und die Funktion rotate(-45) habe ich das Muster um 45° gegen den Uhrzeigersinn gedreht.

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

Variationen mit rechteckigem Hintergrund

Im folgenden Beispiel habe ich das zuvor quadratische Muster durch ein doppelt so breites, rechteckiges Muster ersetzt und zwei Halbkreise mit ihrem Zentrum in der Mitte am oberen und unteren Rand des Rechtecks platziert. Das Muster siehst du in der linken Abbildung.

SVG Pattern Halb- und Viertelkreise auf einem Rechteck

Beispiel auf Codepen

See the Pen Seamless SVG pattern by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

SVG Pattern – Halbkreisvariationen

Owl with brown wave pattern and animated wings

Die folgenden Muster (Pattern) wurden als SVG-Dateien angelegt und bestehen aus Kreisen, die sich überlappen. Um Muster zu transformieren kannst du das Attribut patternTransform im Pattern-Element verwenden. Du findest Beispiele dazu in meinem letzten Artikel (SVG Pattern – Bauernkaro).

Animierte Eule auf Codepen

See the Pen Animated SVG owl by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

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>
Veröffentlicht am

Pattern in SVG

Mit Pattern (Muster) lassen sich Flächen oder Linien in SVG füllen. So lässt sich wie im folgenden Beispiel auf einfache Weise eine Fläche mit kariertem Hintergrund erstellen.

Innerhalb der Definitionen (<defs>-Element) wird das <pattern>-Element angelegt. Über das Attribut id wird später das Muster referenziert. Die Attribute width und height legen die Größe der Musterfläche fest. Im <pattern>-Element wird ein Rechteck mit einer Breite und Höhe von 20 Pixeln und dem Ursprung  x,y = 0,0 angelegt. Das Rechteck wird mit einer grauen Linie, einer Linienstärke von 0,5 und einer Füllfarbe Weiß formatiert.

<defs>
   <pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
   </pattern>
</defs>

Pattern mit fill-attribute verwenden

Mit Hilfe des fill-Attributes wird das Pattern einem SVG-Element zugewiesen. Im Beispiel wird ein Rechteck mit einer Größe von 400 x 400 Pixeln angelegt und mit dem zuvor erstellten Muster gefüllt.

fill=“url(#q20px)“ füllt das Rechteck mit dem Muster.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="320" height="320">
   <defs>
      <pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
         <rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
      </pattern>
   </defs>
   <rect x="0" y="0" rx="0" ry="0" width="320" height="320" fill="url(#q20px)" stroke="none"/>
</svg>

Ergebnis

Auf der linken Seite siehst du das Ergebnis des obigen Quelltextes. Rechts daneben habe ich einen Kreis und ein abgerundetes Quadrat platziert.

SVG pattern SVG pattern content

Beispiel Schachbrettmuster

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="400" height="400">
<defs>
   <pattern id="bwsquare50px" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="50" height="50" stroke="none" fill="#f0c30e"/>
      <rect x="50" y="0" width="50" height="50" stroke="none" fill="#d25300"/>
      <rect x="0" y="50" width="50" height="50" stroke="none" fill="#d25300"/>
      <rect x="50" y="50" width="50" height="50" stroke="none" fill="#f0c30e"/>
   </pattern>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="400" height="400" fill="url(#bwsquare50px)" stroke="grey" stroke-width="2"/>
</svg>

SVG Pattern Schachbrett

Beispiel Würfel in verschiedenen Farbvarianten

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="300" height="300">
<defs>
   <pattern id="cube" width="50px" height="86.52px" patternUnits="userSpaceOnUse">
      <polygon id="top" fill="#FCCB4F" points="50,0 50,0 25,14.43 0,0"/>
      <polygon id="topleft" fill="#F8B334" points="25,14.43 25,43.298 0,28.858 0,0"/>
      <polygon id="topright" fill="#F9E532" points="50,0.021 50,28.868 25,43.298 25,14.43 "/>
      <polygon id="midleft" fill="#FCCB4F" points="25,43.298 0,57.715 0,28.868"/>
      <polygon id="midright" fill="#FCCB4F" points="50,28.868 50,57.758 25,43.298"/>
      <polygon id="bottomleft" fill="#F9E532" points="25,43.362 25,72.156 0,86.52 0,86.52 0,57.715"/>
      <polygon id="bottomright" fill="#F8B334" points="50,57.715 50,86.52 50,86.52 25,72.156 25,43.298"/>
      <polygon id="bottom" fill="#FCCB4F" points="50,86.52 0,86.52 25,72.156 25,72.156"/>
   </pattern>
</defs>
 <rect x="0" y="0" rx="0" ry="0" width="300" height="300" fill="url(#cube)" stroke="none"/>
</svg>

 

SVG Pattern WürfelSVG Pattern Würfel GrünSVG Pattern Würfel PurpleSVG Pattern Blau

Weitere Details zur Arbeit mit Pattern findest du hier:

http://www.w3.org/TR/SVG/pservers.html#Patterns