JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<canvas id="c" width="400" height="400"></canvas>

JavaScript

document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218
 // start of submission //
 with(document.body.style) {
     padding = margin = 0;
     overflow = "hidden"
 }
 c = document.getElementById("c");
 w = c.width = this.innerWidth;
 h = c.height = this.innerHeight;
 var g = c.getContext("2d");
 l = [];

 function r(b) {
     return Math.random() * b - b / 2
 }
 for (var i = 0; i++ < 999;) {
     cw = r(w);
     ch = r(h);
     l.push([cw, ch, cw + r(20), ch + r(20), cw + r(99), ch + r(99)])
 }
 colors = [0, 255, 0];
 t = 1;
 rd = function () {
     g.fillStyle = "#000";
     g.fillRect(0, 0, w, h);
     g.strokeStyle = "#aa0";
     g.lineWidth = 1;
     i = 5;
     if (colors[t] > i - 1) {
         colors[t] -= i;
         colors[(t + 1) % 3] += i
     } else turn = (t + 1) % 3;
     ss = "rgba(" + colors.join(",") + ",";
     g.translate(w / 2, h / 2);
     for (i in l) {
         m = l[i];
         dx = x - m[0];
         dy = y - m[1];
         d = Math.sqrt(dx * dx + dy * dy);
         a = 75 / d;
         a = a > 0.75 ? 0.75 : a;
         if (!(a < 0.15)) {
             g.strokeStyle = ss + a + ")";
             if (a > 0.6 && r(4) < -1.9) m[6] = 1;
             if (m[6] > 0) {
                 m[6] -= 0.05;
                 g.strokeStyle = "rgba(255,255,255," + m[6] + ")"
             }
             g.beginPath();
             g.moveTo(m[0], m[1]);
             g.quadraticCurveTo(m[2] - dx / d * 20, m[3] - dx / d * 20, m[4] - dx / d * 80, m[5] - dy / d * 80);
             g.stroke()
         }
     }
     g.translate(-w / 2, -h / 2)
 };
 document.body.onmousemove = function (b) {
     x = b.clientX - w / 2;
     y = b.clientY - h / 2;
     rd()
 };
 // end of submission //