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