function rect(x1, y1, x2, y2, col) {

  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 +

    0.1}%)`;

}

const NUM = 90;

const MAX_SIZE = 20;

const rects = [];

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

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

  const x1 = Math.random() * 100; // %

  const y1 = Math.random() * 100;

  const size = Math.random() * Math.random() * MAX_SIZE;

  const idx = Math.random() < 0.3 ? 1 + Math.round(Math.random()) : 0;

  col = colors[idx];

  rects.push(rect(x1, y1, x1 + size,  y1 + size, col));

}

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

document.body.innerHTML += `

  <style>

    body, html {

      height: 100%;

      background-repeat: no-repeat;

    }

  </style>

`;