Veröffentlicht am

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.

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.