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

  c.fillStyle = 'blue';

  const iter = 300;

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let rad = 0,

    theta = 0,

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

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight);

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

    rad = Math.sqrt(theta) * scale;

    x = rad * Math.cos(theta);

    y = rad * Math.sin(theta);

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

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

    theta += 0.05;

  }

  c.restore();

}

resize();

window.addEventListener('resize', resize);