Trovo che il 98% di tutto il mio utilizzo SVG provenga da file SVG pre-creati o arte vettoriale in alcuni software di progettazione che alla fine esporto come SVG. Non molto spesso manipolo manualmente le coordinate delle cose nel codice SVG. Ehi, ho persino un libro su tutto questo.
Ma ogni tanto è appropriato e forse anche un po 'divertente. In questo caso, volevo disegnare una linea piuttosto specifica con un paio di curve morbide. Con un po 'di conoscenza della sintassi del percorso di SVG (il più strano, ma il più potente degli strumenti di disegno di SVG) possiamo farlo senza troppi problemi.
Demo con cui abbiamo giocato nel video:
Guarda la Pen
KOvPaa di Chris Coyier (@chriscoyier)
su CodePen.
Idea originale:
Guarda il
percorso illuminato dalla penna di Chris Coyier (@chriscoyier)
su CodePen.
Ricorda che ciò che non abbiamo fatto è regolare l'SVG in modo che gli angoli arrotondati rimanessero in un buon rapporto di aspetto mentre il resto dell'SVG era flessibile e poteva riempire lo spazio verticale e orizzontale. È possibile, è solo più complicato e dovremo coprirlo un'altra volta.