function rect(x1, y1, x2, y2, col, blur=.1) {

  const dx = x1 - x2;

  const dy = y1 - y2;

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

    blur}%)`;

}

const NUM = 8; 

let rects = [];

const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];

let x = 0;

let y = 0;

let t = 8;

function loop() { 

  rects = [];

  for (let i = 0; i < NUM; i++) { 

    x = 50 + 30 * Math.sin(t + i / 2);

    y = 50 + 30 * Math.cos(t * 1.5 * i / 10);

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(255, 255, 255, 1)', 1));

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(0, 0, 0, 0.4)', 

      8 + 6 * Math.cos(y / 10)));

  }

  t += .04;

  document.body.style.backgroundImage = rects.join(', ');

  window.requestAnimationFrame(loop);

}

loop()

document.body.innerHTML += `

  <style>

    body, html {

      height: 100%;

      background: #ccc;

      margin: 0;

      background-repeat: no-repeat;

      width: 100%;

    }

  </style>

`;