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.
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.
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.
Beispiel auf Codepen
See the Pen Seamless SVG pattern by Norbert Mesch (@itsnorbat) on CodePen.