Google's Bunsen Burner Tribute Done By HTML5

Keep up with the very latest developments in the digital marketing world

By Dave Ashworth
on 31/3/11

As well as inspiring childhood memories of laying destruction on the contents of your pencil case in science class, the Google logo to celebrate Robert Bunsen's 200th birthday yet again demonstrates the power and capability of HTML5.

Gone are the days of using Flash to link animation to user intereaction as shown by the video below.  On initial inspection it just appears to be an animated gif, but in a similar way to the recent Jules Verne logo the image reacts to mouse movement.

By moving the cursor up and down the flame grows and shrinks, which in turn speeds up the bubbles.  Moving left and right changes the colour of the flame and having studied this for a few moments, that is all it seems to do:

The code itself utilises HTML5 and in particular the canvas tag and sprite animation. The javascript code then interacts with the canvas using drawing functions which react to the mouse movement, which in turn produces dynamically generated animations.

And not a SWF file in sight.

Long may this continue.