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.