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)

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


  1. Rick

    Very, very slick.

    June 10th, 2009 at 20:34

  2. […] animating SVG with canvas and burst: […]

    June 11th, 2009 at 02:11

  3. […] 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, […]

    June 11th, 2009 at 03:08

  4. […] 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 […]

    June 11th, 2009 at 05:54

  5. Anita

    Awesome, I am loving this 35 day series

    June 11th, 2009 at 08:29

  6. Vance Dubberly

    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.

    June 11th, 2009 at 10:09

  7. […] 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 […]

    June 11th, 2009 at 13:00

  8. Breton

    What exactly do you mean by “clean”?

    June 11th, 2009 at 18:40

  9. Vance Dubberly

    @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.

    June 11th, 2009 at 19:17

  10. soso

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

    June 12th, 2009 at 10:10

  11. Al

    Here’s a Character in Burst:

    Here’s it running on iPhone:

    June 13th, 2009 at 06:48

  12. Al

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

    June 13th, 2009 at 06:51

  13. […] 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 […]

    June 16th, 2009 at 18:34

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

    June 17th, 2009 at 01:20

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

    July 9th, 2009 at 22:53

  16. Stu Ross

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

    –Stu Ross
    Cherry Hill, NJ

    June 10th, 2010 at 10:47

  17. Jessie J

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

    December 20th, 2011 at 17:03

  18. sankekur

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

    March 12th, 2012 at 22:39

    1. Robert Nyman

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

      March 13th, 2012 at 02:55

  19. kulturystyka sklep

    Awesome, I am loving this 35 day series

    September 27th, 2012 at 09:04

  20. jak szybko schudnac

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

    October 1st, 2012 at 03:05

Comments are closed for this article.