Mit dem SVG- Element können wir Muster innerhalb unseres SVG-Markups definieren und diese Muster als verwenden fill. Der grundlegende Prozess für Muster sieht ungefähr so aus:
- Definieren Sie ein
Inneres der SVG - Definieren Sie die Formen innerhalb des Musters
- Verwenden Sie die Formen
- Erstellen Sie eine neue Form und füllen Sie sie mit dem Muster
Dies ist eine Sammlung einfacher SVG-Formen, die als Muster verwendet werden. Diese Liste kann mit der Zeit wachsen, aber es geht weniger darum, eine umfassende Sammlung zu haben, als vielmehr darum, die Syntax als Ausgangspunkt für die Erstellung neuer und aufregender Muster zur Hand zu haben.
Wir halten auch eine Sammlung davon auf CodePen.
Kreismuster
Schachbrettmuster
Sechseckmuster
Würfelmuster
Chevron-Muster
Wenn Sie in Echtzeit mit den verschiedenen Attributen eines Musters herumspielen möchten, um ein Gefühl dafür zu bekommen, wie das Muster funktioniert, versuchen Sie Folgendes: