Rawkes

Recreating Google’s bouncing balls logo in HTML5 canvas

Today Google released a new version of their homepage with the logo constructed of little balls that move around with your mouse. Pretty impressive, but for some reason they decided against using HTML5 canvas. I couldn’t have this, so I spent the morning coding and recreated the logo using HTML5 canvas.

Google's bouncing balls logo

[Update 11/Sep] I'm loving Ian Devlin's adaptation of my and Mark Brenig-Jones' code. Are Google's Bouncing Balls HTML5?

[Update 9/Sep] Mark Brenig-Jones has adapted my code to create a little app that lets you visualise your own words with the Google balls effect.

[Update 8/Sep] I've added touch-based input so iOS users can enjoy the Google goodness.

Today Google released a new version of their homepage with the logo constructed of little balls that move around with your mouse. Pretty impressive, but for some reason they decided against using HTML5 canvas. I couldn't have this, so I spent the morning coding and recreated the logo using HTML5 canvas.

There are a few bits and pieces that could be improved upon, but overall I'm impressed with how it came out after just a couple hours coding time.

I've put all the source code for the experiment up on Github for you to play around with. Enjoy!


Got something to say?

Just want to share this article?