)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Grads

  1. const grad = {
  2.   gen(c) {
  3.     const canvas = c.canvas;
  4.     const t = Math.random() * 2 * Math.PI;
  5.     const cx = canvas.width / 2;
  6.     const cy = canvas.height / 2;
  7.     const r = Math.max(cx, cy);
  8.     const x1 = cx * Math.cos(t);
  9.     const y1 = cy * Math.sin(t);
  10.     const x2 = cx * Math.cos(t + Math.PI);
  11.     const y2 = cy * Math.sin(t + Math.PI);
  12.  
  13.     const drawFn = c => {
  14.       const g = c.createLinearGradient(x1, y1, x2, y2);
  15.       g.addColorStop(0, 'white');
  16.       g.addColorStop(1, 'black');
  17.  
  18.       c.fillStyle = g;
  19.       c.fillRect(0, 0, canvas.width, canvas.height);
  20.     };
  21.  
  22.     drawFn(c);
  23.   }
  24. };
  25.  
  26. Object.assign(document.body.style, { 
  27.     margin: 0,
  28.     display: 'grid',
  29.     'grid-template-columns': '1fr 1fr 1fr',
  30.   });
  31. const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');
  32.  
  33. for (let j = 0; j < 21; j++) { 
  34.   const SIZE = 200;
  35.   const c = document.body.appendChild(
  36.     document.createElement('canvas')
  37.   ).getContext('2d');
  38.  
  39.   c.canvas.width = c.canvas.height = SIZE;
  40.   Object.assign(c.canvas.style, {
  41.     position: 'relative', 
  42.     width: '100%'
  43.   })
  44.  
  45.  
  46.   c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`
  47.   c.fillRect(0, 0, SIZE, SIZE)
  48.  
  49.   for (let i = 0; i < 5; i++) { 
  50.     c.globalAlpha = .5;
  51.     c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]
  52.     grad.gen(c)
  53.   }
  54. }

Not sure what this is… used the random gradient code and variations on it a few times….

snippet.zone ~ 2021-22 /// {s/z}