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();