JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c" ></canvas>
JavaScript
document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218
// start of submission //
g = window, u = Math, v = u.sqrt, h = u.random, f = document.getElementById("c"), i = f.getContext("2d"), j = 400, k = 500, w = [], C = (new Date).getTime();
f.width = j;
f.height = k;
i.fillStyle = "rgb(122,0,25)";
for (n = 0; n < 300; n++) {
f = -0.075 + 2 * h() * 0.075;
g = v(0.005625 - f * f);
w[n] = {
a: 1 + h() * 10,
d: h() * j,
e: h() * k,
b: f,
c: -g + 2 * h() * g
}
}
window.setInterval(function () {
x = (new Date).getTime() - C;
C += x;
i.clearRect(0, 0, j, k);
for (n = 0; n < 50; n++) {
y = x;
a = w[n];
a.d += a.b * y;
a.e += a.c * y;
if (a.d < a.a || a.d > j - a.a) {
a.b = -a.b;
a.d = a.d < a.a ? a.a : j - a.a
}
if (a.e < a.a || a.e > k - a.a) {
a.c = -a.c;
a.e = a.e < a.a ? a.a : k - a.a
}
for (m = n + 1; m < 20; m++) {
b = w[m];
D = a.a + b.a;
p = b.d - a.d;
q = b.e - a.e;
E = p * p + q * q;
r = v(E);
if (r < D) {
c = p / r;
d = q / r;
l = a.b * c + a.c * d;
z = a.c * c - a.b * d;
s = b.b * c + b.c * d;
A = b.c * c - b.b * d;
e = b.a / a.a;
o = (l + e * s) / (1 + e);
t = o - v(o * o - ((1 - e) * l + 2 * e * s) * l / (1 + e));
B = l / e + s - t / e;
a.b = t * c - z * d;
a.c = z * c + t * d;
b.b = B * c - A * d;
b.c = A * c + B * d
}
}
i.beginPath();
i.arc(a.d, a.e, a.a, 0, 2 * u.PI, true);
i.fill()
}
}, 33)
// end of submission //