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.

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)