SVG- elementet lar oss definere mønstre inne i SVG-markeringen vår og bruke disse mønstrene som en fill. Den grunnleggende prosessen for mønstre går omtrent som:
- Definer en
innside av SVG - Definer formene inne i mønsteret
- Bruk formene
- Lag en ny form og fyll den med mønsteret
Dette er en samling enkle SVG-former som brukes som mønstre. Denne listen kan vokse over tid, men ideen er mindre å ha en omfattende samling enn det er å ha syntaksen hendig som utgangspunkt for å skape nye og spennende mønstre.
Vi holder også en samling av disse over på CodePen.
Sirkelmønster
Rutemønster
Sekskantmønster
Kubemønster
Chevron mønster
Hvis du vil leke i sanntid med de forskjellige egenskapene til et mønster for å få en følelse av hvordan mønsteret fungerer, kan du prøve dette: