Google.com has an animated logo using an HTML/JavaScript particle simulator

http://www.google.com

by bgentry • 16 years ago

160 67 16 years ago

google.com

kwamenum86• 16 years ago

I see it in Firefox but not in Chrome from some reason...

d2viant• 16 years ago

Working for me. Running 7.0.514.0 canary build.

Judson2• 16 years ago

Really interesting (at least a few drinks into the night). I tried to click on the logo (obviously to no avail).

Anyone know if it has any deep meaning?

kprobst• 16 years ago

That Google engineers are bored?

brianpan• 16 years ago

That they have a new toy to play with. It looks to me like the part of the Arcade Fire video where the birds are flying away from your mouse cursor.

amanfredi• 16 years ago

I really wanted to click on it, which was very frustrating.

Usually when there's a new logo you can click on it and instantly find out why it's there.

rlm2• 16 years ago

I don't see it in ANY browser.

thenbrent• 16 years ago

Try http://www.google.co.uk

That is the only Google site I found it on.

rlm2• 16 years ago

Thanks! It worked there for me too.

kxs• 16 years ago

Fine on http://www.google.de as well.

oliveoil• 16 years ago

hmm.. a clever trick for non-chrome users to realize how slow the javascript in their browser is?

Judson2• 16 years ago

Looks really good on my Webkit nightly builds, but I'm sure some of the "stable" browser builds are less than ideal.

m0nastic• 16 years ago

I'm running vanilla Safari, and it loaded fine.

abraham• 16 years ago

Works great in Firefox 4.

sujeetsr• 16 years ago

works for me in firefox 3.6.8

endtime2• 16 years ago

If we're playing that game, I suspect the reason it doesn't show up in Opera is that Opera's JS engine is faster. ;-)

dotcoma• 16 years ago

Another good reason to use Opera - that it doesn't show up in Opera, I mean :)

senki• 16 years ago

rubypay's link above works, and pretty fast...

http://www.rubypay.com/google/Google.htm

photon_off4• 16 years ago

I've been developing a Javascript intensive bookmarklet for the past month or so. It works on FF, Chrome, Safari, even IE6. But on Opera, I cannot figure out why it behaves so glitchy. Sometimes it works, sometimes it doesn't, but it never, ever shows me any errors. Maybe this has to do with the fact that it caches things even when you tell it not to. In addition to that, AFAIK there's no way to deselect text (without breaking other things), which makes developing drag and drop pretty much impossible on it. It's "developer tools" show you a big list of "errors" which are mostly it knit-picking various CSS properties things that it doesn't support, like rounded corners for example.

Perhaps I'm wrong. Maybe my code is getting run perfectly, but it's just happening so blazingly fast that it doesn't affect anything at all. In which case, I'd still give Opera the big "fuck you" that I'm feeling after writing this.

But hey, when you open a new tab it animates.

fookyong• 16 years ago

any way to direct-link to it? I think it might not show up for non-US locations. certainly nothing to see on google.co.jp

bgentry• 16 years ago

Tried to think of a way before I posted it but couldn't come up with anything. I would happily change the URL if somebody knows how to direct link.

igravious• 16 years ago

As somebody above says, http://www.google.co.uk works :)

soitgoes• 16 years ago

http://www.google.com/ncr should take you to google.com rather than a local search such as google.co.uk. However, I still don't see anything with Chrome or Firefox when trying this.

ericz• 16 years ago

Anyone know if the logo has any meaning beyond the cool tech demo?

tdmackey• 16 years ago

Google's birthday, I am assuming. Although they tend to flipflop between the 7th and 27th.

studer2• 16 years ago

http://searchengineland.com/google-balls-logo-not-googles-bi... claims to have an official statement:

"Today’s doodle is not related to a birthday but is fast, fun and interactive, just the way we think search should be."

and mentions that there's a Google press conference tomorrow.

1amzave• 16 years ago

Anyone else finding it...slightly annoying? I mean it's neat-looking, but having a big distracting animation pop up every time I open a new browser window (google.com is my home page) is a little less neat.

photon_off4• 16 years ago

Between this and the former 100% cpu buckyball logo, I'm actually getting quite annoyed.

yanw3• 16 years ago

You can set a background image I suppose.

mike-cardwell• 16 years ago

The SSL version of Google doesn't have it:

https://www.google.com/

niels_olson• 16 years ago

or use IE 7 :-)

baha_man• 16 years ago

Yes, partly because it's distracting and partly because it reminds me of an Ishihara test.

kellishaver• 16 years ago

I find it very visually disorienting. It literally made me throw up last night-that's not bashing Google or anything. I was already feeling rather nauseas due to a migraine at the time. I went to look up something, and it was.... just too much.

This is probably some kind of first for the guys behind the Google logos.

rubypay• 16 years ago

Here's a copy for anyone that can't see it: http://www.rubypay.com/google/Google.htm The version on Google's site is a little different, it clears away the static particles when the logo is in motion.

meemo• 16 years ago

fun game: try to see how many particles you can trap in a corner while the rest of the logo stabilizes. I can get two easily and have almost gotten three.

olalonde• 16 years ago

Works on http://www.google.co.uk

modeless2• 16 years ago

The particles are divs styled with border-radius and position:absolute. Seems like SVG, Canvas, or CSS transforms would be better; I wonder if they chose border-radius and position:absolute for speed or compatibility? I don't have a copy of IE around to try; do they do something different there?

It's amazing the hoops people are willing to jump through to get fast graphics on the web. When WebGL comes out and makes all these hacks obsolete you're going to start seeing some really amazing stuff.

rythie• 16 years ago

IE doesn't support SVG, Canvas, or CSS transforms.

modeless2• 16 years ago

Or border-radius. So they have to have a special IE mode regardless.

andyn• 16 years ago

It works in IE using periods with a large font size to render the coloured circles.

thu• 16 years ago

I don't like their links fading-in (I could click faster on, say, language tools if I had not to wait). Now they make my browser choke (firefox on netbook, cpu in powersave).

points2• 16 years ago

Never mind that, does everyone else get the funky new streaming search results on google using Chrome?

  1. Go to google.com
  2. Start typing
  3. It moves the search box while you're still typing
  4. It starts streaming and updating results in real time as you type.

It's crazy awesome.

akgerber• 16 years ago

No, on "7.0.503.0 dev" on the Mac.

photon_off4• 16 years ago

Keyboardr.com does that.

studer2• 16 years ago

It's been running as an experiment for some time, and I don't think it's limited to Chrome:

http://googlesystem.blogspot.com/2010/08/google-live-search-...

eogas• 16 years ago

Strange, mine doesn't do that. I'm even on chrome.

points2• 16 years ago

Looks like I'm one of the privileged few! ;)

yanw3• 16 years ago

What's really cool is that when you move the browser window around, the particles move accordingly.

MJR• 16 years ago

This is seriously distracting and I really wonder how many users are going to be completely dumbfounded by the circles floating around where the logo used to be.

An event-based illustrated logo is a simple switch-out. There's not much resistance to understanding the meaning there. The Pac-Man game logo was a bit more complete, but Pac-Man is universally recognized. This on the other hand - how may people will see the logo when they move their cursor away and understand that something on the page isn't broken - that it's intentional?

It will be interesting to see the larger reaction from everyday Google users.

yanw3• 16 years ago

Tweeps seem to like it, and it doesn't showup in IE.

bd• 16 years ago

It works in IE7 (pretty fast), just all particles have the same size.

jcl• 16 years ago

The Pac-Man doodle triggered hundreds of support calls and problem tickets for the makers of browsers and antivirus software. A big part of that, though, was the fact that it played sound (even when the Google search page was loaded on a background tab).

http://www.computerworld.com/s/article/9177261/Google_s_Pac_...

supadog• 16 years ago

Love it, one of the more interesting google logos. I'm still not sure whether dynamic identities are good or bad for a brand. The pros are it keeps the brand fresh, it allows the users to interact with the brand. But the cons are it can make the brand less recognisable and maybe the confusing for some users. Thoughts?

davidcann• 16 years ago

Sure, that's a consideration for smaller brands, but I don't think google has any trouble with consistent brand recognition.

uptown• 16 years ago

Consider how many other companies are having their logo blogged, discussed and emailed around to friends today like Google's. I think you'll get your answer about whether it's worth it for them.

tommizzle• 16 years ago

Best Google Doodle of all time?

pmorici• 16 years ago

I surprised they screw with their logo as much as they do. I know for a fact this confuses the heck out of less technically savvy individuals.

hellweaver666• 16 years ago

I'm not... I must have seen about 100 tweets today from people talking about the logo, plus stories on social news sites like HN and Reddit etc.

It's a genius idea because the frequent changes are enough for some people to keep Google.com as their homepage and it gets people talking about Google as well.

thisisblurry• 16 years ago

Here is a gist of of the JavaScript file that helps to create the experience: https://gist.github.com/eeae3d6aa1ac04f074cf

At a glance, it looks remarkably simple. It also looks as though Google is using parts of the Closure library as well.

eclark• 16 years ago

Most of google's js web apps use closure pretty heavily. It's not that big a stretch to think that there would be some cross pollination.

neilk• 16 years ago

I really hope this is part of a campaign to kill off IE6.

rakkhi• 16 years ago

very cool love it, html5 I assume?

pjscott• 16 years ago

It's really cute and clever, and if my grandmother has used Google today, she was probably overcome with fright that she had broken something.

Google.com has an animated logo using an HTML/JavaScript particle simulator

Related Stories