SVG- elementin avulla voimme määrittää malleja SVG-merkintöjemme sisällä ja käyttää näitä malleja a fill. Kuvioiden perusprosessi menee noin:
- Määritä
SVG: n sisäpuoli - Määritä kuvion sisällä olevat muodot
- Käytä muotoja
- Luo uusi muoto ja täytä se kuviolla
Tämä on kokoelma yksinkertaisia SVG-muotoja, joita käytetään kuvioina. Tämä luettelo voi kasvaa ajan myötä, mutta ajatus ei ole siitä, että meillä olisi kattava kokoelma kuin että syntaksilla on kätevä lähtökohta uusien ja jännittävien kuvioiden luomiselle.
Pidämme myös kokoelman näistä CodePenillä.
Ympyräkuvio
Checkerboard-kuvio
Kuusikulmio
Kuution kuvio
Chevron-kuvio
Jos haluat pelata reaaliajassa kuvion eri ominaisuuksilla saadaksesi tuntuman kuvion toiminnasta, kokeile tätä: