sketch.js

// A p5 version of this animation: https://dribbble.com/shots/2933993-Spinning-Circle-Animation

let angle1 = 0;
let angle2 = 0;
let circleDiam = 120;
let spacing = 40;


function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  noFill();
  strokeCap(SQUARE);
  strokeWeight(10);
  stroke(255);
}

function draw() {
  background(50);
  translate(width / 2, height / 2);

  //inner arcs
  rotate(angle1);
  arc(0, 0, circleDiam, circleDiam, 0, 160);
  arc(0, 0, circleDiam, circleDiam, 200, 270);
  angle1 = angle1 + 2.5;

  //middle arcs
  push()
  rotate(angle2);
  arc(0, 0, circleDiam + spacing, circleDiam + spacing, 0, 250);
  angle2 = angle2 - 8;
  pop();
  
  push()
  arc(0, 0, circleDiam + 2*spacing, circleDiam + 2*spacing, 0, 160);
  arc(0, 0, circleDiam + 2*spacing, circleDiam + 2*spacing, 200, 270);
  angle1 = angle1 + .3;
  pop()
}