I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG code. Hey, I’ve even got a book about all that.
But once in a while, it’s appropriate, and maybe even a little bit fun. In this case, I wanted to draw a pretty specific line with a couple of soft turns in it. With a little knowledge of SVG’s path syntax (the weirdest, but most powerful of SVG’s drawing tools) we can get it done without much fuss.
Demo we played with in video:
See the Pen
KOvPaa by Chris Coyier (@chriscoyier)
on CodePen.
Original idea:
See the Pen
Lighted Path by Chris Coyier (@chriscoyier)
on CodePen.
Remember that what we didn’t get done is adjusting the SVG such that the rounded corners stayed in a nice aspect ratio while the rest of the SVG was flexible and could fill vertical and horizontal space. That’s possible, it’s just more complicated and we’ll have to cover it another time.
