const grad = {

  gen(c) {

    const canvas = c.canvas;

    const t = Math.random() * 2 * Math.PI;

    const cx = canvas.width / 2;

    const cy = canvas.height / 2;

    const r = Math.max(cx, cy);

    const x1 = cx * Math.cos(t);

    const y1 = cy * Math.sin(t);

    const x2 = cx * Math.cos(t + Math.PI);

    const y2 = cy * Math.sin(t + Math.PI);

    const drawFn = c => {

      const g = c.createLinearGradient(x1, y1, x2, y2);

      g.addColorStop(0, 'white');

      g.addColorStop(1, 'black');

      c.fillStyle = g;

      c.fillRect(0, 0, canvas.width, canvas.height);

    };

    drawFn(c);

  }

};

Object.assign(document.body.style, { 

    margin: 0,

    display: 'grid',

    'grid-template-columns': '1fr 1fr 1fr',

  });

const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');

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

  const SIZE = 200;

  const c = document.body.appendChild(

    document.createElement('canvas')

  ).getContext('2d');

  c.canvas.width = c.canvas.height = SIZE;

  Object.assign(c.canvas.style, {

    position: 'relative', 

    width: '100%'

  })

  c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`

  c.fillRect(0, 0, SIZE, SIZE)

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

    c.globalAlpha = .5;

    c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]

    grad.gen(c)

  }

}