JSFiddle - React, Tailwind, and code Playground

by Ifnak

HTML

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

CSS

*{
    margin:0;
    padding:0;
}
body {
    background-image : linear-gradient(#6B92B9,#d8e2ec)    
}
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-over";
        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 = 9,
    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+= (i % 2 ? .4 : -.4) * t.sin(o), s.y+= t.cos(o + s.d) + 1 + s.r / 9, s.r, 0, n * 2);
        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)