Skip to content

Instantly share code, notes, and snippets.

@utsengar

utsengar/google-balls-doodle

Created September 7, 2010 06:22
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save utsengar/567948 to your computer and use it in GitHub Desktop.
Save utsengar/567948 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
google-balls-doodle
<div id="lga">
<style>
body{overflow:hidden}#hplogo{position:relative;width:0;margin:0 auto;right:190px;height:160px}.particle{position:absolute;z-index:-1}.circle{-moz-border-radius:160px;-webkit-border-radius:160px;-khtml-border-radius:160px;border-radius:160px}#cpf,#sbl,#fctr{background:transparent}
</style>
<noscript>
&lt;style&gt;#hplogo{right:0;width:auto;background:url(/intl/en_ALL/images/srpr/logo1w.png) no-repeat center}&lt;/style&gt;
</noscript>
<div id="hplogo">
<div class="particle circle" style="background-color: rgb(237, 157, 51); height: 18.337px; width: 18.337px; left: 200.733px; top: 77.5385px;">
</div>
<div class="particle circle" style="background-color: rgb(212, 77, 97); height: 18.3058px; width: 18.3058px; left: 348.512px; top: 81.8892px;">
</div>
<div class="particle circle" style="background-color: rgb(79, 122, 242); height: 22.1116px; width: 22.1116px; left: 239.613px; top: 70.4019px;">
</div>
<div class="particle circle" style="background-color: rgb(239, 154, 30); height: 22.8906px; width: 22.8906px; left: 194.808px; top: 62.7918px;">
</div>
<div class="particle circle" style="background-color: rgb(73, 118, 243); height: 19.1222px; width: 19.1222px; left: 260.824px; top: 37.6458px;">
</div>
<div class="particle circle" style="background-color: rgb(38, 146, 48); height: 18.1463px; width: 18.1463px; left: 300.341px; top: 78.4752px;">
</div>
<div class="particle circle" style="background-color: rgb(31, 158, 44); height: 18.1667px; width: 18.1667px; left: 293.999px; top: 59.6668px;">
</div>
<div class="particle circle" style="background-color: rgb(28, 72, 221); height: 29.8688px; width: 29.8688px; left: 51.7094px; top: 41.0012px;">
</div>
<div class="particle circle" style="background-color: rgb(42, 86, 234); height: 18.6596px; width: 18.6596px; left: 265.368px; top: 52.1893px;">
</div>
<div class="particle circle" style="background-color: rgb(51, 85, 216); height: 37.6286px; width: 37.6286px; left: 3.50322px; top: 46.4659px;">
</div>
<div class="particle circle" style="background-color: rgb(54, 182, 65); height: 18.1532px; width: 18.1532px; left: 293.718px; top: 5.45562px;">
</div>
<div class="particle circle" style="background-color: rgb(46, 93, 239); height: 22.3706px; width: 22.3706px; left: 252.126px; top: 58.4896px;">
</div>
<div class="particle circle" style="background-color: rgb(213, 55, 71); height: 16.1956px; width: 16.1956px; left: 353.338px; top: 42.7057px;">
</div>
<div class="particle circle" style="background-color: rgb(235, 103, 111); height: 16.0805px; width: 16.0805px; left: 336.319px; top: 52.0415px;">
</div>
<div class="particle circle" style="background-color: rgb(249, 177, 37); height: 23.0988px; width: 23.0988px; left: 234.618px; top: 31.1114px;">
</div>
<div class="particle circle" style="background-color: rgb(222, 54, 70); height: 16.1063px; width: 16.1063px; left: 320.676px; top: 70.2754px;">
</div>
<div class="particle circle" style="background-color: rgb(42, 89, 240); height: 22.3038px; width: 22.3038px; left: 23.1831px; top: 39.8686px;">
</div>
<div class="particle circle" style="background-color: rgb(235, 156, 49); height: 18.1562px; width: 18.1562px; left: 182.128px; top: 89.3582px;">
</div>
<div class="particle circle" style="background-color: rgb(196, 23, 49); height: 17.5752px; width: 17.5752px; left: 152.258px; top: 65.7324px;">
</div>
<div class="particle circle" style="background-color: rgb(216, 32, 56); height: 21.2762px; width: 21.2762px; left: 163.855px; top: 39.5189px;">
</div>
<div class="particle circle" style="background-color: rgb(95, 138, 248); height: 17.8071px; width: 17.8071px; left: 252.889px; top: 31.8122px;">
</div>
<div class="particle circle" style="background-color: rgb(239, 161, 30); height: 19.3377px; width: 19.3377px; left: 180.867px; top: 62.8824px;">
</div>
<div class="particle circle" style="background-color: rgb(46, 85, 226); height: 16.0947px; width: 16.0947px; left: 273.365px; top: 99.1009px;">
</div>
<div class="particle circle" style="background-color: rgb(65, 103, 228); height: 21.0968px; width: 21.0968px; left: 227.961px; top: 116.246px;">
</div>
<div class="particle circle" style="background-color: rgb(11, 153, 26); height: 16.3311px; width: 16.3311px; left: 295.012px; top: 40.1462px;">
</div>
<div class="particle circle" style="background-color: rgb(72, 105, 227); height: 16.6779px; width: 16.6779px; left: 264.785px; top: 115.564px;">
</div>
<div class="particle circle" style="background-color: rgb(48, 89, 227); height: 19.6692px; width: 19.6692px; left: 85.7965px; top: 54.5652px;">
</div>
<div class="particle circle" style="background-color: rgb(16, 161, 29); height: 16.1151px; width: 16.1151px; left: 293.785px; top: 23.407px;">
</div>
<div class="particle circle" style="background-color: rgb(207, 64, 85); height: 20.5197px; width: 20.5197px; left: 102.768px; top: 94.1489px;">
</div>
<div class="particle circle" style="background-color: rgb(205, 67, 89); height: 32.0608px; width: 32.0608px; left: 183.092px; top: 35.2488px;">
</div>
<div class="particle circle" style="background-color: rgb(40, 85, 234); height: 23.7125px; width: 23.7125px; left: 16.3248px; top: 40.2377px;">
</div>
<div class="particle circle" style="background-color: rgb(202, 39, 60); height: 16.1402px; width: 16.1402px; left: 331.171px; top: 80.5342px;">
</div>
<div class="particle circle" style="background-color: rgb(38, 80, 225); height: 22.4743px; width: 22.4743px; left: 31.9237px; top: 57.0457px;">
</div>
<div class="particle circle" style="background-color: rgb(74, 123, 249); height: 21.1189px; width: 21.1189px; left: 213.127px; top: 50.931px;">
</div>
<div class="particle circle" style="background-color: rgb(61, 101, 231); height: 18.0859px; width: 18.0859px; left: 72.4615px; top: 4.67368px;">
</div>
<div class="particle circle" style="background-color: rgb(244, 120, 117); height: 12.288px; width: 12.288px; left: 326.871px; top: 33.8552px;">
</div>
<div class="particle circle" style="background-color: rgb(243, 103, 100); height: 12.1085px; width: 12.1085px; left: 318.631px; top: 46.2287px;">
</div>
<div class="particle circle" style="background-color: rgb(29, 78, 235); height: 12.9083px; width: 12.9083px; left: 252.44px; top: 80.2745px;">
</div>
<div class="particle circle" style="background-color: rgb(105, 139, 241); height: 17.3562px; width: 17.3562px; left: 265.407px; top: 88.8724px;">
</div>
<div class="particle circle" style="background-color: rgb(250, 198, 82); height: 24.1535px; width: 24.1535px; left: 149.412px; top: 51.3702px;">
</div>
<div class="particle circle" style="background-color: rgb(238, 82, 87); height: 13.9859px; width: 13.9859px; left: 93.1673px; top: 62.9577px;">
</div>
<div class="particle circle" style="background-color: rgb(207, 42, 63); height: 21.6764px; width: 21.6764px; left: 128.473px; top: 44.2248px;">
</div>
<div class="particle circle" style="background-color: rgb(86, 129, 245); height: 20.3419px; width: 20.3419px; left: 45.6226px; top: -29.1704px;">
</div>
<div class="particle circle" style="background-color: rgb(69, 119, 246); height: 14.4725px; width: 14.4725px; left: 10.6761px; top: 17.133px;">
</div>
<div class="particle circle" style="background-color: rgb(247, 179, 38); height: 23.4917px; width: 23.4917px; left: 122.673px; top: 70.3529px;">
</div>
<div class="particle circle" style="background-color: rgb(43, 88, 232); height: 13.2254px; width: 13.2254px; left: 270.898px; top: 87.8136px;">
</div>
<div class="particle circle" style="background-color: rgb(250, 203, 94); height: 18.0849px; width: 18.0849px; left: 164.893px; top: 54.5092px;">
</div>
<div class="particle circle" style="background-color: rgb(224, 46, 61); height: 20.0706px; width: 20.0706px; left: 119.695px; top: 39.4215px;">
</div>
<div class="particle circle" style="background-color: rgb(241, 109, 111); height: 12.2509px; width: 12.2509px; left: 342.587px; top: 32.9147px;">
</div>
<div class="particle circle" style="background-color: rgb(80, 123, 242); height: 14.5369px; width: 14.5369px; left: 55.2254px; top: -4.41964px;">
</div>
<div class="particle circle" style="background-color: rgb(86, 131, 247); height: 20.7183px; width: 20.7183px; left: 29.6761px; top: -25.7705px;">
</div>
<div class="particle circle" style="background-color: rgb(49, 88, 226); height: 16.6482px; width: 16.6482px; left: 214.55px; top: 113.699px;">
</div>
<div class="particle circle" style="background-color: rgb(240, 105, 108); height: 15.8412px; width: 15.8412px; left: 131.826px; top: 19.4228px;">
</div>
<div class="particle circle" style="background-color: rgb(55, 105, 246); height: 18.7612px; width: 18.7612px; left: 11.4423px; top: 11.5083px;">
</div>
<div class="particle circle" style="background-color: rgb(96, 132, 239); height: 14.409px; width: 14.409px; left: 69.9591px; top: 55.3352px;">
</div>
<div class="particle circle" style="background-color: rgb(42, 92, 244); height: 19.5517px; width: 19.5517px; left: 10.1457px; top: 19.0789px;">
</div>
<div class="particle circle" style="background-color: rgb(244, 113, 110); height: 15.3724px; width: 15.3724px; left: 101.392px; top: 47.7602px;">
</div>
<div class="particle circle" style="background-color: rgb(248, 194, 71); height: 13.1198px; width: 13.1198px; left: 172.886px; top: 45.2282px;">
</div>
<div class="particle circle" style="background-color: rgb(231, 70, 83); height: 17.7388px; width: 17.7388px; left: 120.688px; top: 53.1511px;">
</div>
<div class="particle circle" style="background-color: rgb(236, 65, 71); height: 12.2613px; width: 12.2613px; left: 318.961px; top: 57.5892px;">
</div>
<div class="particle circle" style="background-color: rgb(72, 118, 241); height: 16.5966px; width: 16.5966px; left: 252.21px; top: 103.048px;">
</div>
<div class="particle circle" style="background-color: rgb(239, 92, 92); height: 13.5896px; width: 13.5896px; left: 92.9063px; top: 57.8598px;">
</div>
<div class="particle circle" style="background-color: rgb(37, 82, 234); height: 12.5651px; width: 12.5651px; left: 229.374px; top: 117.69px;">
</div>
<div class="particle circle" style="background-color: rgb(71, 121, 247); height: 33.7582px; width: 33.7582px; left: 38.93px; top: -75.4677px;">
</div>
<div class="particle circle" style="background-color: rgb(75, 120, 241); height: 10.949px; width: 10.949px; left: 235.794px; top: 93.1075px;">
</div>
</div>
<script>
(function() {
try {
if (!google.doodle) google.doodle = {};
var a = 200,
g = -200,
j = -200,
k, l, m, n = 0,
o = 0,
p = 0,
q = 35,
r, s = [],
t, u, v;
google.doodle.init = function() {
if (!v && window.location.href.indexOf("#") == -1) {
v = true;
if (t = document.getElementById("hplogo")) {
google.j && google.j.en && w(100, x, function() {
return google.rein && google.dstr
});
w(100, y, function() {
return google.listen
});
w(100, z, function() {
return google.browser
})
}
}
};
var w = function(b, c, d) {
if (d()) c();
else b < 200 && window.setTimeout(function() {
w(b + 1, c, d)
}, b)
},
x = function() {
if (!google.doodle.n) {
google.doodle.n = true;
google.rein.push(google.doodle.init);
google.dstr.push(A)
}
},
y = function() {
google.listen(document, "mousemove", B)
},
B = function(b) {
a = 200;
g = b.clientX - t.offsetLeft;
j = b.clientY - t.offsetTop
},
C = function() {
return [u ? window.screenLeft : window.screenX, u ? window.screenTop : window.screenY, document.body.clientWidth]
},
z = function() {
u = google.browser.engine.IE && google.browser.engine.version != "9.0";
s = [D(202, 78, 9, "ed9d33"), D(348, 83, 9, "d44d61"), D(256, 69, 9, "4f7af2"), D(214, 59, 9, "ef9a1e"), D(265, 36, 9, "4976f3"), D(300, 78, 9, "269230"), D(294, 59, 9, "1f9e2c"), D(45, 88, 9, "1c48dd"), D(268, 52, 9, "2a56ea"), D(73, 83, 9, "3355d8"), D(294, 6, 9, "36b641"), D(235, 62, 9, "2e5def"), D(353, 42, 8, "d53747"), D(336, 52, 8, "eb676f"), D(208, 41, 8, "f9b125"), D(321, 70, 8, "de3646"), D(8, 60, 8, "2a59f0"), D(180, 81, 8, "eb9c31"), D(146, 65, 8, "c41731"), D(145, 49, 8, "d82038"), D(246, 34, 8, "5f8af8"), D(169, 69, 8, "efa11e"), D(273, 99, 8, "2e55e2"), D(248, 120, 8, "4167e4"), D(294, 41, 8, "0b991a"), D(267, 114, 8, "4869e3"), D(78, 67, 8, "3059e3"), D(294, 23, 8, "10a11d"), D(117, 83, 8, "cf4055"), D(137, 80, 8, "cd4359"), D(14, 71, 8, "2855ea"), D(331, 80, 8, "ca273c"), D(25, 82, 8, "2650e1"), D(233, 46, 8, "4a7bf9"), D(73, 13, 8, "3d65e7"), D(327, 35, 6, "f47875"), D(319, 46, 6, "f36764"), D(256, 81, 6, "1d4eeb"), D(244, 88, 6, "698bf1"), D(194, 32, 6, "fac652"), D(97, 56, 6, "ee5257"), D(105, 75, 6, "cf2a3f"), D(42, 4, 6, "5681f5"), D(10, 27, 6, "4577f6"), D(166, 55, 6, "f7b326"), D(266, 88, 6, "2b58e8"), D(178, 34, 6, "facb5e"), D(100, 65, 6, "e02e3d"), D(343, 32, 6, "f16d6f"), D(59, 5, 6, "507bf2"), D(27, 9, 6, "5683f7"), D(233, 116, 6, "3158e2"), D(123, 32, 6, "f0696c"), D(6, 38, 6, "3769f6"), D(63, 62, 6, "6084ef"), D(6, 49, 6, "2a5cf4"), D(108, 36, 6, "f4716e"), D(169, 43, 6, "f8c247"), D(137, 37, 6, "e74653"), D(318, 58, 6, "ec4147"), D(226, 100, 5, "4876f1"), D(101, 46, 5, "ef5c5c"), D(226, 108, 5, "2552ea"), D(17, 17, 5, "4779f7"), D(232, 93, 5, "4b78f1")];
var b = C();
k = b[0];
l = b[1];
m = b[2];
E()
},
A = function() {
google.unlisten(document, "mousemove", B);
r && window.clearTimeout(r);
if (s) for (var b = 0, c; c = s[b++];) c.m()
},
E = function() {
var b = C(),
c = b[0],
d = b[1];
b = b[2];
n = c - k;
o = d - l;
p = b - m;
k = c;
l = d;
m = b;
a = Math.max(0, a - 2);
c = true;
for (d = 0; b = s[d++];) {
b.update();
if (c) c = b.i
}
q = c ? 250 : 35;
r = window.setTimeout(E, q)
},
D = function(b, c, d, h) {
return new F(b, c, d, h)
},
F = function(b, c, d, h) {
this.x = this.o = b;
this.y = this.p = c;
this.k = this.h = d;
b = 100;
this.a = b * (Math.random() - 0.5);
this.c = b * (Math.random() - 0.5);
this.l = 3 + Math.random() * 98;
this.r = 0.1 + Math.random() * 0.4;
this.e = 0;
this.g = 1;
this.i = false;
this.d = document.createElement("div");
this.d.className = "particle";
this.style = this.d.style;
h = "#" + h;
if (u) {
this.d.innerHTML = ".";
this.style.fontFamily = "Monospace";
this.style.color = h;
this.style.fontSize = "100px";
this.style.lineHeight = 0;
this.style.cursor = "default"
} else {
this.d.className += " circle";
this.style.backgroundColor = h
}
t.appendChild(this.d);
this.m = function() {
t.removeChild(this.d)
};
this.update = function() {
this.x += this.a;
this.y += this.c;
this.a = Math.min(50, Math.max(-50, (this.a + (n + p) / this.h) * 0.92));
this.c = Math.min(50, Math.max(-50, (this.c + o / this.h) * 0.92));
var e = g - this.x,
f = j - this.y,
i = Math.sqrt(e * e + f * f);
e /= i;
f /= i;
if (i < a) {
this.a -= e * this.l;
this.c -= f * this.l;
this.e += (0.005 - this.e) * 0.4;
this.g = Math.max(0, this.g * 0.9 - 0.01);
this.a *= 1 - this.g;
this.c *= 1 - this.g
} else {
this.e += (this.r - this.e) * 0.005;
this.g = Math.min(1, this.g + 0.03)
}
e = this.o - this.x;
f = this.p - this.y;
i = Math.sqrt(e * e + f * f);
this.a += e * this.e;
this.c += f * this.e;
this.k = this.h + i / 8;
this.i = i < 0.3 && this.a < 0.3 && this.c < 0.3;
if (!this.i) {
if (!u) this.style.width = this.style.height = this.k * 2 + "px";
this.style.left = this.x - (u ? 20 : 0) + "px";
this.style.top = this.y + "px"
}
}
}
} catch (G) {
google.ml(G, false, {
_sn: "PAR"
})
};
})();
google.doodle.init()
</script>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment