document.body.style.margin = 0;

const canvas = document.body.appendChild(document.createElement('canvas'));

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

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  draw();

}

setInterval(draw, 16);

let t = 0;

function draw() {

  c.fillStyle = 'rgba(155, 155, 155, .9)';

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

  c.fillStyle = 'rgba(0, 0, 0, 0.5)';

  const iter = 500;

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let rad = 0,

    scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,

    theta = 0,

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight);

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

    rad = 3 * Math.sin(Math.sqrt(theta)) * scale;

    x = rad * Math.cos(theta);

    y = rad * Math.sin(theta * 0.99);

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

    c.fillRect(-x, -y, 4, 4);

    theta += 0.05 + t * 0.001;

  }

  c.restore();

  t += 0.1;

}

resize();

window.addEventListener('resize', resize);