Modele SVG - CSS-Tricks

Anonim

Elementul SVG ne permite să definim modele în interiorul marcajului nostru SVG și să le folosim ca un fill. Procesul de bază pentru tipare merge ceva de genul:

  • Definiți un interior al SVG
  • Definiți formele din interiorul modelului
  • Folosește formele
  • Creați o nouă formă și umpleți-o cu modelul

Aceasta este o colecție de forme SVG simple utilizate ca modele. Această listă poate crește în timp, dar ideea este mai puțin să ai o colecție cuprinzătoare decât să ai sintaxa la îndemână ca punct de plecare pentru crearea unor modele noi și interesante.

De asemenea, păstrăm o colecție a acestora peste CodePen.

Model de cerc

 

Model de tablă de șah

 

Model hexagonal

 

Model de cub

 

Model de Chevron

 

Dacă doriți să jucați în timp real cu diferitele atribute ale unui model pentru a avea o idee despre modul în care funcționează modelarea, încercați acest lucru: