createCanvas(400, 400); 

}

​

const d = 50;

let frame = 0;

​

function draw() {

  // center x, y coordinates at 0,0

  translate(width / 2, height / 2);

  background(220);

  // circle 1 - down

  fill(0);

  circle(0, frame * 10, d);

  // circle 2 - right

  fill('#FFFF00');

  circle(frame, 0, d);

  // circle 3 - left

  fill('#FF00FF');

  circle(-frame, 0, d);

  // circle 4 - up

  fill('#00FFFF');

  circle(0, -frame, d);

  // top-left corner

  fill('#fff');

  circle(-frame, -frame, d);

  // top-right corner

  fill('#fff');

  circle(frame, -frame, d);

  // bottom-left corner

  fill('#fff');

  circle(-frame, frame, d);

  // bottom-right corner

  fill('#fff');

  circle(frame, frame, d);

  // increment frame var to animate

  frame++;

}