Prvek SVG nám umožňuje definovat vzory uvnitř našeho označení SVG a používat tyto vzory jako fill. Základní proces pro vzory je něco jako:
- Definujte
vnitřek SVG - Definujte tvary uvnitř vzoru
- Použijte tvary
- Vytvořte nový tvar a vyplňte ho vzorem
Toto je sbírka jednoduchých tvarů SVG používaných jako vzory. Tento seznam se může postupem času rozrůst, ale myšlenka je méně mít komplexní sbírku, než mít syntaxi po ruce jako výchozí bod pro vytváření nových a vzrušujících vzorů.
Rovněž uchováváme jejich sbírku na CodePen.
Kruhový vzor
Šachovnicový vzor
Šestiúhelník vzor
Krychle vzor
Chevron vzor
Pokud si chcete hrát v reálném čase s různými atributy vzoru, abyste získali představu o tom, jak vzorování funguje, zkuste toto: