Robin Berjon

Bouncy bouncy

Google's Bouncy Balls, in SVG

As many noticed on Twitter this morning, Google pulled off one of its neat little logo tricks with a bunch of bouncy balls that fly all over the place. Useless. Very DHTML. But hey, it works on we the geek crowd.

Google's original version uses a bunch of div elements with round corners which it positions absolutely using CSS. Later in the day, Rob Hawkes made a canvas version.

Well that's all nice and sweet, but there's more than one way to do it. So I stole Rob's code, wrote a very quick and dirty update (I'm pretty sure the code could be simplified a fair bit in this case), and got it to apply to SVG. It was really easy. I'm too lazy to give it extensive testing, but it seems to work on quite a few browsers. You can check out the result and hack on it to your heart's content if you so desire.