let anchors

let idx

let leng = 10

let size = 200

let px = 0

let py = 0

function seed() {

  idx = 0

  anchors = (Date.now() + '').split``

    .reverse()

    .map(v => parseFloat(v) / 10)

    .splice(0, leng)

}

let last = 0

let zoom = 1

function rand() {

  if (idx > size * size) seed()

  px += zoom

  py += ~~(px / size)

  if (px >= size) px = 0

  if (py >= size) py = 0

  const point = {

    x: anchors[idx % leng],

    y: anchors[(idx + 1) % leng]

  }

  idx++

  let dists = []

  for (let i = 0; i < anchors.length; i += 2) {

    let dx = px - anchors[i] * size

    let dy = py - anchors[i + 1] * size

    dists.push(Math.sqrt(dx * dx + dy * dy))

  }

  dists.sort()

  last += (dists[0] / size - last) / 4

  return last

}

seed()

let d = document

let b = d.body

with (b.appendChild(

  Object.assign(d.createElement`canvas`, { width: 400, height: 400 })

).getContext`2d`) {

  fillStyle = 'black'

  fillRect(0, 0, 400, 400)

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

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

      const c = rand() * 255

      fillStyle = `rgb(${c}, ${c}, ${c})`

      fillRect(j * 2, i * 2, 1, 2)

    }

  }

}

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  draw();

}

function draw() {

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

  Math.min(window.innerWidth, window.innerHeight) * 0.0015;

  const iter = 300,

        halfWidth = window.innerWidth / 2,

        halfHeight = window.innerHeight / 2;

  let rad = 50, rad2 = 50, theta = 0, x, y;

  let x2, y2;

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

    c.fillStyle = 'blue';

    x = halfWidth + rad * Math.cos(theta);

    y = halfHeight + rad * Math.sin(theta);

    c.fillRect(x, y, 5, 5);

    c.fillStyle = 'red';

    rad2 = 80 + rad * Math.cos(theta * 3);

    x2 = halfWidth + rad2 * Math.cos(theta);

    y2 = halfHeight + rad2 * Math.sin(theta);

    c.fillRect(x2, y2, 5, 5);

    c.fillStyle = 'green';

    c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);

    theta += .1;

  }

}

resize();

window.addEventListener('resize', resize);

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

// ¯\_(:P)_/¯

Object.assign(document.createElement`canvas`,{width:1,height:1}).toDataURL()

//// ... 

document.body.innerHTML=`<canvas id=x>`;x.width=x.height=1;x.toDataURL()

const FOUR_PI = 6 * Math.PI;

const { cos, sin } = Math;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

}

let inc = 0;

function draw() { 

  c.fillStyle = 'rgba(0, 0, 0, .3)'

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

  c.fillStyle = 'white';

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let theta = 0,

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight)

  let b = 5 * cos(inc);

  inc += .02;

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 10 * sin(theta / 3));

    // randomly speed-coded and tweaked... leaving as is :D

    x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);

    y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);

    c.fillRect(x,y, 2, 2);

    theta += 0.04;

  }

  c.restore();

  requestAnimationFrame(draw)

}

resize();

addEventListener('resize', resize);

draw();

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)

  }

}