Je trouve que 98% de toute mon utilisation SVG provient de fichiers SVG pré-créés ou d'images vectorielles dans certains logiciels de conception que j'exporte finalement au format SVG. Je ne manipule pas très souvent à la main les coordonnées des choses dans le code SVG. Hé, j'ai même un livre sur tout ça.
Mais de temps en temps, c'est approprié, et peut-être même un peu amusant. Dans ce cas, je voulais dessiner une ligne assez spécifique avec quelques virages doux. Avec un peu de connaissance de la syntaxe de chemin de SVG (le plus étrange, mais le plus puissant des outils de dessin de SVG), nous pouvons le faire sans trop de soucis.
Démo avec laquelle nous avons joué en vidéo:
Voir le Pen
KOvPaa de Chris Coyier (@chriscoyier)
sur CodePen.
Idée originale:
Voir le Pen
Lighted Path de Chris Coyier (@chriscoyier)
sur CodePen.
N'oubliez pas que ce que nous n'avons pas fait, c'est d'ajuster le SVG de sorte que les coins arrondis restent dans un bon rapport hauteur / largeur tandis que le reste du SVG était flexible et pouvait remplir l'espace vertical et horizontal. C'est possible, c'est juste plus compliqué et nous devrons le couvrir une autre fois.