SVG Pattern – 3D Webmuster


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

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.