function rect(x1, y1, x2, y2, col, blur = 0.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 blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(

  ','

);

const cols = ['black', 'white'];

function gen() {

  [...document.querySelectorAll('div')].forEach(d =>

    d.parentNode.removeChild(d)

  );

  for (let j = 0; j < 4; j++) {

    const rects = [];

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

      const x = Math.random() * 100;

      const y = Math.random() * 100;

      const s = Math.random() * Math.random() * Math.random() * 30 + 3;

      const col = cols[~~(Math.random() * cols.length)];

      rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));

    }

    const el = document.body.appendChild(document.createElement('div'));

    el.style.backgroundImage = rects.join(', ');

    el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];

  }

}

gen();

document.body.innerHTML += `

  <button id="regen">Regenerate</button>

  <style>

    body, html {

      height: 100%;

      background: #ccc;

      margin: 0;

      background-repeat: no-repeat;

      width: 100%;

    }

    div {

      position: absolute;

      top: 0; left: 0;

      width: 100%;

      height: 100%;

    }

    #regen {

      position: absolute;

      width: 100px;

      height: 30px;

      background: #ccc;

      border: 1px solid white;

      margin: 1em;

      cursor: pointer;

      transition: all 250ms ease-out;

      z-index: 999;

    }

    #regen:hover { background: #333; color: white; }

  </style>

`;

regen.onclick = gen;