Skip navigation

Google Doodle: Bouncy Balls Aren't HTML5

Originally Posted on Author's Blog

Google's logo today.

When Google changes its logo in honor of a holiday, someone's birthday, or just for the heck of it, it sometimes gets some chatter. When Google created the Pac-Man logo, articles appeared of people trying to figure out how it worked, or commenting on tech support calls within organizations from users who blamed their own IT team, or even notes about lost productivity.

Today's Google Doodle has gotten a lot of traction in the web standards community and even sites that sometimes talk about web standards, like Mashable (Google Logo Turns into Animated Particles) and New Scientist (What's Google's mysterious doodle?). Those aren't the interesting bits of coverage, however.

Not HTML5?

Christian Heilmann took the time to reverse engineer the code and discovered that the balls were nothing more than divs with a border radius using script to move around the page (Google goes bubbly – interactive logo today on the UK homepage (plus source)). As he notes, the effect isn't exactly HTML5. The script moves and resizes the divs, but that isn't unique to HTML5 and could be done in HTML4 and support IE6. While CSS3 is used to create the balls, that could have been done with other techniques, and CSS3 is still not HTML5. Interestingly, Google blocked Opera in its browser sniffer, which Bruce Lawson explained could be bypassed by telling Opera to report itself as Firefox.

HTML5 canvas

Rob Hawkes wasn't impressed, primarly because Google did not use HTML5. He set about rebuilding the Google Doodle in the HTML5 canvas element, and did so in just a couple hours (Recreating Google’s bouncing balls logo in HTML5 canvas). If you have a canvas-capable browser, check Rob Hawkes' version.

SVG

Robin Berjon borrowed (stole?) Rob Hawkes' code to use a base for re-creating the effect using SVG (Google's Bouncy Balls, in SVG). See the SVG version in all its (somewhat chunky) glory.

Who Called it HTML5?

When New Scientist tweeted its article about the Google Doodle, the tweet read: "Could the Google doodle herald HTML5?" They could be forgiven simply for not being a web-focused magazine. Pocket-lint reported it was written in HTML5, but they are also not dedicated to web development. It seems the rumor started in multiple places via multiple tweets via multiple users, and probably owing to the HTML5 doctype on the page, which implies HTML5 but doesn't actually make it HTML5.

If you didn't get to see today's Google Doodle, or you prefer to surf in Netscape Navigator 3.04, then check out this screencast lovingly stolen from Christian Heilmann:

If you haven't tried it yet, try moving the browser window around and watching the balls react.

Update (Sept 9):
AreGooglesBouncingBallsHTML5.com — Need I say more?

3v6Ru0qxSuM

Chapters
United States
Argentina
Australia
Austria
Bahrain
Belgium
Brazil
Cambodia
Canada
China
Costa Rica
Czech Republic
Denmark
Dominican Republic
Ecuador
El Salvador
France
Germany
Global
Greece
Iceland
India
Indonesia
Ireland
Isle of Man
Israel
Italy
Japan
Jordan
Kazakhstan
Kenya
Kuwait
Malaysia
Mexico
Moldova
Mongolia
Morocco
Netherlands
New Zealand
Nigeria
Oman
Panama
Paraguay
Peru
Portugal
Puerto Rico
Qatar
Russia
Saudi Arabia
Singapore
South Africa
South Korea
Spain
Sri Lanka
Sweden
Switzerland
Tunisia
Turkey
Ukraine
United Arab Emirates
United Kingdom