Emulating SVG path animated d attribute with Canvas

This isn’t particularly breathtaking, but I was looking at creating a simple animation without Flash. And seeing as I’m most comfortable with Inkscape as my primary vector graphics editor I figured “Why not just animate the path’s data attribute to interpolate keyframes?”

Sadly, I couldn’t find any browser that supports it yet, but I wasn’t ready to give up my hope of using Inkscape to generate the data… so I looked into using Javascript to animate everything. I eventually moved from using the SVG Dom to Canvas based drawing, but the data comes straight from a SVG document:

http://www.tapper-ware.net/stable/HTML5-animate-path-d/testdata.svg

This isn’t really exciting or breathtaking, just a friendly reminder what we could do if the path d attribute was finally animated 🙂 .

http://www.tapper-ware.net/stable/HTML5-animate-path-d/

Leave a Reply

Your email address will not be published. Required fields are marked *

*