Mozilla

animating SVG with canvas and burst

Today’s demo is short, but it also includes a long screencast that describes how it’s put together. The demo’s author, Alistair MacDonald (@F1LT3R), is one of the maintainers of Processing.js and the Burst engine, which is the basis for today’s demo and tutorial.

If you haven’t clicked through to his site, I strongly suggest that you do so. You’ll notice that the site is animated and slick-looking with sections that slide in and out and lots of graphics. It’s the kind of thing that you normally would see written in flash, but there’s no flash on the main page. It’s all CSS, canvas and animation in the DOM. Pretty amazing.

On to the demo. There have been some demos done with animating SVG but there’s one thing that stands out about this one that makes it different. Instead of loading SVG natively into the DOM, which is how SVG was originally designed, the Burst engine loads the SVG, parses it and creates some JS objects around it which you can then use to render it to a canvas. From there you can quickly animate it with the Burst engine and mix it with other content on a canvas.

View the Demo


I also strongly suggest that you watch the tutorial on how this demo was put together. He shows how easy it is to take inkscape, the Burst engine and other simple JS to take a simple drawing and animate it. It’s worth the length of the video.


View Video (.ogv) | View Video (.mp4)

21 comments

Comments are now closed.

  1. Rick wrote on June 10th, 2009 at 20:34:

    Very, very slick.

  2. Pingback from nitot's status on Thursday, 11-Jun-09 09:11:01 UTC - Identi.ca on June 11th, 2009 at 02:11:

    […] animating SVG with canvas and burst: http://hacks.mozilla.org/2009/06/rendering-svg-canvas-burst/ […]

  3. Pingback from Mozilla Firefox 3.5 Wissen für Entwickler » Suchmaschinen Blog on June 11th, 2009 at 03:08:

    […] der Firefox 3.5 bietet noch viel mehr. Denn auch die Canvas-Funktionen und HTML5-Video ist eine Sache für sich. Was hier den Anschein von trockenem Stoff hat, […]

  4. Pingback from Ajaxian » Animating SVG with Canvas and Burst on June 11th, 2009 at 05:54:

    […] just posted on the work of Alistair MacDonald who used his Burst engine to demonstrate taking SVG and having Burst load it and convert it all to JavaScript objects that are rendered inside of a […]

  5. Anita wrote on June 11th, 2009 at 08:29:

    Awesome, I am loving this 35 day series

  6. Vance Dubberly wrote on June 11th, 2009 at 10:09:

    Just finished up an animated SVG US Map. I’m really excited that SVG is finally getting decent implementation in at least a few browsers. I ended up using the dojo gfx toolkit because, well I use dojo and it has a library for this sort of thing but the idea is the same.

    Should be noted that inkscape is pretty darn buggy, btw. Also that while simple animations in SVG run pretty nicely the more complex the lower the “Framerate” and sadly it’s nowhere near as clean as flash.

  7. Pingback from Animating SVG with Canvas and Burst on June 11th, 2009 at 13:00:

    […] just posted on the work of Alistair MacDonald who used his Burst engine to demonstrate taking SVG and having Burst load it and convert it all to JavaScript objects that are rendered inside of a […]

  8. Breton wrote on June 11th, 2009 at 18:40:

    What exactly do you mean by “clean”?

  9. Vance Dubberly wrote on June 11th, 2009 at 19:17:

    @Breton sorry that was pretty ambiguous. Not a reference to the code or API. I’m referring to playback. Smoothness of animation. We’re on our way but just try to implement a particle system in svg or canvas… it’ll make ya cry.

  10. soso wrote on June 12th, 2009 at 10:10:

    Why do you not using smil for this stuff?
    OK, Firefox has no native smil support but fakesmile does the job.

  11. Al wrote on June 13th, 2009 at 06:48:

    Here’s a Character in Burst: http://hyper-metrix.com/burst/development/doc/demos/js/GitHub%27s-Octocat.htm

    Here’s it running on iPhone: http://hyper-metrix.com/burst/development/doc/demos/js/Octocat-iPhone/Octocat-iPhone.htm

  12. Al wrote on June 13th, 2009 at 06:51:

    @Vance Dubberly: I found the new “real” version of Inkscape to run very, very well. I usually work with the pre-releases.

  13. Pingback from audio player - HTML5 style at hacks.mozilla.org on June 16th, 2009 at 18:34:

    […] week we featured a demo from Alistair MacDonald (@F1LT3R) where he showed how to animate SVG with Canvas and a bunch of free tools. This week he has another demo for us that shows how you can use the new […]

  14. Pingback from 颠覆网络35天 ─ HTML5范儿的音频播放器 < MJiA on June 17th, 2009 at 01:20:

    […] 上周Alistair MacDonald(@F1LT3R)给我们带来过一个示例,向我们展示了如何使用Canvas制作动画SVG和很多免费的工具。这周他同样给我们带来了一个示例,向我们展示如何使用全新的Firefox 3.5 audio元素和一些Canvas和JavaScript来构建一个非常好看的音频播放器。 在Firefox 3.5中查看演示 […]

  15. Pingback from 谋智社区 » Blog Archives » 颠覆网络35天 ─ 使用Canvas和Burst制作SVG动画 on July 9th, 2009 at 22:53:

    […] 原文地址:animating SVG with canvas and burst […]

  16. Stu Ross wrote on June 10th, 2010 at 10:47:

    I am very interested in bringing vector animation to the iPhone. When will you release Burst?

    –Stu Ross
    Cherry Hill, NJ

  17. Jessie J wrote on December 20th, 2011 at 17:03:

    hhmm it appears the demo doesn’t work anymore. The video tut is still good though. Thanks for this!

  18. sankekur wrote on March 12th, 2012 at 22:39:

    I have try many times, but still cant get it, i cant open the tutorial, i don’t know why

    1. Robert Nyman wrote on March 13th, 2012 at 02:55:

      No, sorry, seems like the web site is gone now.

  19. kulturystyka sklep wrote on September 27th, 2012 at 09:04:

    Awesome, I am loving this 35 day series

  20. jak szybko schudnac wrote on October 1st, 2012 at 03:05:

    It’s so easy to do with your article.thanks

Comments are closed for this article.