const FOUR_PI = 4 * 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.clearRect(0, 0, canvas.width, canvas.height);

  c.fillStyle = 'blue';

  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)

  // Freeth's Nephroid

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

  // r = a(1 + 2sin(θ / 2))

  let b = 2 * cos(inc);

  inc += .01;

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

    let rad = a * (b + 2 * sin(theta / 2))

    x = rad * cos(theta);

    y = rad * sin(theta);

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

    theta += 0.05;

  }

  c.restore();

  requestAnimationFrame(draw)

}

resize();

window.addEventListener('resize', resize);

draw()