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 – 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.