SVG- elementet låter oss definiera mönster inuti vår SVG-markering och använda dessa mönster som en fill. Den grundläggande processen för mönster går ungefär som:
- Definiera en
insida av SVG - Definiera formerna inuti mönstret
- Använd formerna
- Skapa en ny form och fyll den med mönstret
Detta är en samling enkla SVG-former som används som mönster. Denna lista kan växa över tiden men tanken är mindre att ha en omfattande samling än att ha syntaxen till hands som utgångspunkt för att skapa nya och spännande mönster.
Vi håller också en samling av dessa över på CodePen.
Cirkelmönster
Schackrutmönster
Hexagon mönster
Kubmönster
Chevronmönster
Om du vill leka i realtid med de olika attributen i ett mönster för att få en känsla för hur mönstret fungerar, prova detta: