const canvas = document.body.appendChild(document.createElement("canvas"));
const c = canvas.getContext("2d");
document.body.style.margin = 0;

function resize() {
  canvas.width = innerWidth * 2;
  canvas.height = innerHeight * 2;
  canvas.style.width = innerWidth + "px";
  canvas.style.height = innerHeight + "px";
}
addEventListener("resize", resize);
resize();

const PAD = 50;
const RAD = 2;
const SPEED = 40;
const TWO_PI = Math.PI * 2;

let mode = "draw";

let t = Math.random() * TWO_PI,
  x = innerWidth,
  y = innerHeight,
  vx = 0,
  vy = 0,
  ta = 0,
  w = 10,
  h = 1,
  hue = 20;

function loop() {
  c.globalAlpha = 1;
  if (Math.random() < 0.12) {
    let alpha = 0.02;
    if (Math.random() < 0.1) alpha = 0.1;
    c.fillStyle = `rgba(255, 255, 255, ${alpha})`;
    c.fillRect(0, 0, canvas.width, canvas.height);
  }
  for (var i = 0; i < SPEED; i++) {
    t = Math.sin(ta) * TWO_PI;
    vx = RAD * Math.cos(t);
    vy = RAD * Math.sin(t);
    ta += Math.random() * 0.1 - 0.05;
    x += vx;
    y += vy;

    if (Math.random() < 0.005) {
      mode = "no draw";
      hue = [200, 20, 10, 40][~~(Math.random() * 4)];
      if (Math.random() < 0.5) {
        w = Math.random() * 200;
        h = Math.random() * Math.random() * 10;
      } else {
        w = Math.random() * 20;
        h = Math.random() * Math.random() * 200;
      }
    } else if (Math.random() < 0.005) {
      mode = "draw";
    }

    if (mode === "draw") {
      c.shadowColor = "rgba(0, 205, 205, 0.2)";
      c.shadowBlur = 5;
      c.fillStyle = `hsl(${hue}, 100%, 50%)`;
      c.fillRect(x, y, w, h);

      c.shadowColor = null;
      c.shadowBlur = 0;
    }

    if (x < -PAD) {
      x = innerWidth + PAD;
    } else if (x > canvas.width + PAD) {
      x = -PAD;
    }
    if (y < -PAD) {
      y = innerHeight + PAD;
    } else if (y > canvas.height + PAD) {
      y = -PAD;
    }
  }
  c.globalAlpha = 0.9;
  c.drawImage(canvas, -2, -1, canvas.width + 3, canvas.height + 4);

  requestAnimationFrame(loop);
}
loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.