{"id":83,"date":"2010-04-02T00:57:06","date_gmt":"2010-04-01T22:57:06","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=83"},"modified":"2010-04-02T00:57:06","modified_gmt":"2010-04-01T22:57:06","slug":"emulating-svg-path-animated-d-attribute-with-canvas","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/emulating-svg-path-animated-d-attribute-with-canvas\/","title":{"rendered":"Emulating SVG path animated d attribute with Canvas"},"content":{"rendered":"<p>This isn&#8217;t particularly breathtaking, but I was looking at creating a simple animation without Flash. And seeing as I&#8217;m most comfortable with Inkscape as my primary vector graphics editor I figured &#8220;Why not just animate the path&#8217;s data attribute to interpolate keyframes?&#8221;<\/p>\n<p>Sadly, I couldn&#8217;t find any browser that supports it yet, but I wasn&#8217;t ready to give up my hope of using Inkscape to generate the data&#8230; 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:<\/p>\n<p>http:\/\/www.tapper-ware.net\/stable\/HTML5-animate-path-d\/testdata.svg<\/p>\n<p>This isn&#8217;t really exciting or breathtaking, just a friendly reminder what we could do if the path d attribute was finally animated \ud83d\ude42 .<\/p>\n<p>http:\/\/www.tapper-ware.net\/stable\/HTML5-animate-path-d\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This isn&#8217;t particularly breathtaking, but I was looking at creating a simple animation without Flash. And seeing as I&#8217;m most comfortable with Inkscape as my primary vector graphics editor I figured &#8220;Why not just animate the path&#8217;s data attribute to interpolate keyframes?&#8221; Sadly, I couldn&#8217;t find any browser that supports it yet, but I wasn&#8217;t &hellip; <a href=\"https:\/\/www.tapper-ware.net\/blog\/emulating-svg-path-animated-d-attribute-with-canvas\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Emulating SVG path animated d attribute with Canvas<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/83"}],"collection":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}