Thursday, June 11th, 2009

Animating SVG with Canvas and Burst

Category: Examples

Christopher Blizzard and his team are doing great write-ups on as they celebrate 35 days of Open Web goodness.

They 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 canvas.

To get a feel for the code, view source:


  1. Burst.defaults.debug=false;
  3.     Burst.defaults.ease="easeOutQuad";
  4.     Burst.timeline("chassis", 0, 100, 1, true)
  5.       .shape("car", "car.svg", "svg", 0, 0, 1, 0)
  6.         .cut("wheel1;wheel2")        
  7.         .group("chassis")
  8.           .track("top").key(0,0).key(50,-20).key(70,0)        
  9.     ;
  11.     Burst.defaults.ease="linear";
  12.     Burst.timeline("wheels", 0, 100, 1, true)
  13.       .shape("car", "car.svg", "svg", 0, 0, 1, 0)
  14.         .cut("chassis")        
  15.         .group("wheel1").track("centerX").key(0,230).track("centerY").key(0,350)
  16.           .track("rot").key(0,0).key(100,-360)
  17.         .group("wheel2").track("centerX").key(0,430).track("centerY").key(0,350)
  18.           .track("rot").key(0,0).key(100,-360)
  19.     ;
  21.     Burst.timeline("carObject", 0, 300, 3, false)      
  22.       .track("scl").key(0,.5)
  23.       .track("left").key(0,400).key(300,-195)
  24.       .inherit("wheels")
  25.       .inherit("chassis")
  26.     ;
  29.     Burst.timeline("boom", 0, 10, 1, true)
  30.       .shape("boom", "boom.svg", "svg", 0, 0, 1, 0)
  31.     ;
  33.     Burst.start("carObject", function(){
  34.         Burst.timeline("chassis").paused=true;
  35.         Burst.timeline("wheels").paused=true;
  36.         Burst.start("boom");
  37.     });

and then watch the tutorial that shows how you can take Inkscape and quickly get animating.

View the Ogg or mp4 versions.

Also check out the other items:

Posted by Dion Almaer at 7:54 am

4 rating from 22 votes


Comments feed TrackBack URI

I’m not sure… you can use JS directly on SVG, so why would you need to use Canvas as well? It can be done in SVG+JS. Isn’t it bad enough, that IE needs plugin for SVG, we also need users to install Canvas plugin? God…

Comment by paziek — June 11, 2009

@paziek: Why not just include the canvas support in the SVG plugin?

Comment by tj111 — June 11, 2009

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.

@paziek actually the technique most commonly used is to abstract the commands detect IE and substitute the SVG lib with a VML one… this is usually all handled by your chosen library.

Comment by mojave — June 11, 2009

I checked out the Burst demo and also the cakejs. Both do some pretty cool stuff but currently suffer from the same ailment: busy-wait-itis. Even when that Burst demo finishes, it pegs the CPU at 100%. Incidentally, while the car in the demo is moving, the CPU utilization is less. It appears both are rendering to Canvas in a tight, busy-wait style loop. Reminds me of the annoying flash ads that would consume 100% of the CPU doing either nothing or minimal animation. Some time in the near future FlashBlock will have to be updated to detect Burst and cakejs. Won’t someone think of the poor CPUs! But seriously, how much energy is wasted putting CPU’s into a busy-wait with Flash and now this technology?

Comment by JonathanLeech — June 11, 2009

SVG plugin might help me, I saw a article somewhere, you’d better google it, trying some footscript could works i think.

Comment by dofuskamas — July 11, 2009

Leave a comment

You must be logged in to post a comment.