SVG Webmuster rund

Dieses Webmuster habe ich mit Affinity Designer erstellt und als SVG exportiert. In der SVG-Datei habe ich Zeichnung als Muster (Pattern) definiert. Mittels der Slider kannst du das Muster rotieren, sklalieren und die Linien (strokes) ein- bzw. ausblenden. Die Verbindung zwischen den Reglern und der Grafik ist mit JavaScript realisiert.

Beispiel auf codepen.io

See the Pen SVG seamless rounded weawing pattern by Norbert Mesch (@itsnorbat) on CodePen.

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

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.

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.

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.

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>