OL Snow

by Ifnak

HTML

<canvas id="c"></canvas>

CSS

*{margin:0;padding:0;}
body{background-image:-webkit-linear-gradient(#6B92B9,#e6edf3)}
canvas{display:block}

JavaScript

function e(e, t) {
        return r() * (t - e + 1) + e
}

function d(e, t) {
        function r(e, t, r, i) {
                c.beginPath();
                c[u] = "xor";
                c.strokeStyle = "#" + e;
                c.arc(t, r, 66, n * i[0], n * i[1]);
                c.stroke();
                c[u] = "destination-atop";
                c.arc(t, r, 66, n * i[1], n * i[0]);
                c.stroke()
        }
        var i = 79 + e,
                s = 66 + t,
                o = 158,
                a = [2, 1.2],
                f = [1.8, .8];
        c.lineWidth = 13;
        r("007a9c", e, t, f);
        r("ffa100", i, s, a);
        r("000", e += o, t, f);
        r("009b3a", i += o, s, a);
        r("e10e49", e += o, t, f)
}
var w = window,
        t = Math,
        n = t.PI,
        r = t.random,
        i, s, o = 0,
        u = "globalCompositeOperation",
        a = document.getElementById("c"),
        f = w.innerWidth,
        l = w.innerHeight,
        c = a.getContext("2d"),
        h = 2,
        p = [];
a.width = f;
a.height = l;
for(i=0;i<l;++i,p.push({x:r()*f,y:r()*l,r:e(1,3),d:e(1,l)}));
setInterval(function () {
        c.clearRect(0, 0, f, l - h);
        d(f / 2 - 158, l - 200);
        c[u] = "xor";
        c.fillStyle = "#fff";
        c.beginPath();
        o += e(0, 7) ? .01 : -.01;
        for (i = 0; i < l - h; ++i) {
                s = p[i];
                c.moveTo(s.x, s.y);
                c.arc(s.x, s.y, s.r, 0, n * 2);
                s.y += t.cos(o + s.d) + 1 + s.r / 9;
                s.x += (i % 2 ? .4 : -.4) * t.sin(o);
                if (s.y > l - (h - 1.2)) {
                        p[i].x = r() * f;
                        p[i].y = -9;
                }
        }
        c.fill();
        if (h < l / 1.7) h += l / 9e3
}, 32)