Snowfield! Like a starfield (never heard of one of those in a demo comp before) but it's XMAS SNOW!!! Randomly generated snowflake shapes coming at ya.
D=b.style,f=window;D.margin=0;D.overflow="hidden";i=f.innerWidth,j=f.innerHeight;c.width=i;c.height=j;k=Math,l=k.random,n=k.sin,p=k.floor,q=20,r=[],s=k.PI;function t(d){d.b=d.x=(l()*i-i*.5)*q;d.c=d.y=(l()*j-j*.2)*q;d.a=q;d.d=l()}for(var v=0,w;v<300;v++){w={};t(w);r.push(w)}setInterval(function(){a.fillStyle="rgba(0,0,0,.6)";a.fillRect(0,0,i,j);for(var d=0;d<300;d++){var b=r[d],o=n(s)*32-16,u=b.x/b.a,e=u+i/2-o,g=o=b.y/b.a,m=l()*360,x=b.a>q-5?(q-b.a)/5:1,h=q-b.a-4;a.fillStyle="hsla("+p(m)+",50%,85%,"+x+")";a.beginPath();if(b.a<q-6){a.save();a.translate(e,g);a.rotate(b.d*(d%2?1:-1)*(d%3/2+.1));g=0;e=h/(d%4+2);for(m=h/(d%3+1);g<6;g++){a.lineTo(-e,m);a.lineTo(0,h);a.lineTo(e,m);a.lineTo(0,0);a.rotate(k.PI/3)}a.fill();if(d%2==0){g=0;for(e=h/(d%5+1);g<6;g++){a.beginPath();a.moveTo(0,h);a.lineTo(-e,h-e);a.lineTo(0,h-e);a.lineTo(e,h-e);a.fill();a.rotate(k.PI/3)}}a.restore()}else{a.arc(e,g,1/b.a*5+1,0,k.PI*2,true);a.fill()}b.b=u;b.c=o;b.a-=.15;b.d+=l()/5;if(b.a<.15||b.b<-i/2||b.b>i/2||b.c>j)t(b);s+=k.PI/2}},25);
RD1iLnN0eWxlLGY9d2luZG93O0QubWFyZ2luPTA7RC5vdmVyZmxvdz0iaGlkZGVuIjtpPWYuaW5uZXJXaWR0aCxqPWYuaW5uZXJIZWlnaHQ7Yy53aWR0aD1pO2MuaGVpZ2h0PWo7az1NYXRoLGw9ay5yYW5kb20sbj1rLnNpbixwPWsuZmxvb3IscT0yMCxyPVtdLHM9ay5QSTtmdW5jdGlvbiB0KGQpe2QuYj1kLng9KGwoKSppLWkqLjUpKnE7ZC5jPWQueT0obCgpKmotaiouMikqcTtkLmE9cTtkLmQ9bCgpfWZvcih2YXIgdj0wLHc7djwzMDA7disrKXt3PXt9O3Qodyk7ci5wdXNoKHcpfXNldEludGVydmFsKGZ1bmN0aW9uKCl7YS5maWxsU3R5bGU9InJnYmEoMCwwLDAsLjYpIjthLmZpbGxSZWN0KDAsMCxpLGopO2Zvcih2YXIgZD0wO2Q8MzAwO2QrKyl7dmFyIGI9cltkXSxvPW4ocykqMzItMTYsdT1iLngvYi5hLGU9dStpLzItbyxnPW89Yi55L2IuYSxtPWwoKSozNjAseD1iLmE+cS01PyhxLWIuYSkvNToxLGg9cS1iLmEtNDthLmZpbGxTdHlsZT0iaHNsYSgiK3AobSkrIiw1MCUsODUlLCIreCsiKSI7YS5iZWdpblBhdGgoKTtpZihiLmE8cS02KXthLnNhdmUoKTthLnRyYW5zbGF0ZShlLGcpO2Eucm90YXRlKGIuZCooZCUyPzE6LTEpKihkJTMvMisuMSkpO2c9MDtlPWgvKGQlNCsyKTtmb3IobT1oLyhkJTMrMSk7Zzw2O2crKyl7YS5saW5lVG8oLWUsbSk7YS5saW5lVG8oMCxoKTthLmxpbmVUbyhlLG0pO2EubGluZVRvKDAsMCk7YS5yb3RhdGUoay5QSS8zKX1hLmZpbGwoKTtpZihkJTI9PTApe2c9MDtmb3IoZT1oLyhkJTUrMSk7Zzw2O2crKyl7YS5iZWdpblBhdGgoKTthLm1vdmVUbygwLGgpO2EubGluZVRvKC1lLGgtZSk7YS5saW5lVG8oMCxoLWUpO2EubGluZVRvKGUsaC1lKTthLmZpbGwoKTthLnJvdGF0ZShrLlBJLzMpfX1hLnJlc3RvcmUoKX1lbHNle2EuYXJjKGUsZywxL2IuYSo1KzEsMCxrLlBJKjIsdHJ1ZSk7YS5maWxsKCl9Yi5iPXU7Yi5jPW87Yi5hLT0uMTU7Yi5kKz1sKCkvNTtpZihiLmE8LjE1fHxiLmI8LWkvMnx8Yi5iPmkvMnx8Yi5jPmopdChiKTtzKz1rLlBJLzJ9fSwyNSk7
// remove frame margin and scrollbars when max out size of canvas
var ds = document.body.style;
ds.margin = "0px";
ds.overflow = "hidden";
// get dimensions of window and resize the canvas to fit
var win = window,
width = win.innerWidth,
height = win.innerHeight,
mousex = width/2, mousey = height/2;
c.width=width;
c.height=height;
// setup aliases
var M = Math,
Rnd = M.random,
Sin = M.sin,
Flr = M.floor;
// constants and storage for objects that represent snow flake positions
var depth = 20,
units = 300, //500
flakes = [],
Z = 0.15,
SA=M.PI;
// function to reset a flake object
function resetFlake(f)
{
f.px = f.x = (Rnd() * width - (width * 0.5)) * depth;
f.py = f.y = (Rnd() * height - (height * 0.2)) * depth;
f.z = depth;
f.s = Rnd(); // random seed for each snowflake
}
// initial flake setup
for (var i=0, n; i<units; i++)
{
n = {};
resetFlake(n);
flakes.push(n);
}
// star rendering anim function
setInterval(function()
{
// clear background
a.fillStyle = "rgba(0,0,0,0.8)";
a.fillRect(0, 0, width, height);
// update all flakes
for (var i=0; i<units; i++)
{
var n = flakes[i],
w = Sin(SA) * 32 - 16,
xx = n.x / n.z,
nx = xx + width/2 - w,
yy = n.y / n.z,// + w,
ny = yy,
// colour sparkle
hue = Rnd() * 360,
// fog alpha fade in
alpha = n.z > depth - 5 ? (depth - n.z)/5 : 1,
// start radius of LOD snowflake
rad = depth - n.z - 4;
// fade in (fog effect) using alpha value
a.fillStyle = "hsla(" + Flr(hue) + ",50%,90%," + alpha + ")";
a.beginPath();
if (n.z < depth - 6)
{
// LOD snowflake graphic
a.save();
a.translate(nx, ny);
// randomize the initial snowflake rotation a bit
a.rotate(n.s * (i%2 ? 1 : -1) * ((i%3)/2 + 0.1));
// render basic star style snowflake
for (var m=0,g=rad/(i%4+2),h=rad/(i%3+1); m<6; m++)
{
a.lineTo(-g, h);
a.lineTo(0, rad);
a.lineTo(g, h);
a.lineTo(0, 0);
a.rotate(M.PI / 3);
}
a.fill();
// render spikes on each spoke
if (i % 2 == 0)
{
for (var s=0,g=rad/(i%5+1); s<6; s++)
{
a.beginPath();
a.moveTo(0, rad);
a.lineTo(-g, rad-g);
a.lineTo(0, rad-g);
a.lineTo(g, rad-g);
a.fill();
a.rotate(M.PI / 3);
}
}
a.restore();
}
else
{
// modify x and y position slightly by randomized sinwave
a.arc(nx, ny, 1/n.z * 5 + 1, 0, M.PI*2, true);
a.fill();
}
// update flake position and sinewave offset state
n.px = xx;
n.py = yy;
n.z -= Z;
n.s += Rnd()/5;
// reset when flake is out of the view field
if (n.z < Z || n.px < -width/2 || n.px > width/2 || n.py > height)
{
// reset flake
resetFlake(n);
}
SA += M.PI/2;
}
}, 25);