var theta = 350

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES)

  strokeCap(SQUARE)

}

​

function draw() {

  translate(width/2, height*0.5)

  background(30);

  noFill()

​

  let rng = min(theta, 180)

  let rad = span / sin(rng/2)

  let shift = cos(rng/2) * rad/2

  // let shift = cos(theta/2) * rad/2

  // the spanning arc

  strokeWeight(200)

  stroke(0)

  arc(0,shift, rad, rad, -90-theta/2, -90+theta/2)

  // the placeholder data lines

  strokeWeight(15)

  stroke(180)

  arc(0,shift, rad+150, rad+150, -90-theta/2, -90-theta/2 + .333*theta)

  arc(0,shift, rad+50, rad+50, -90-theta/2+.333*theta, -90-theta/2 + .666*theta)

  arc(0,shift, rad-50, rad-50, -90-theta/2+.666*theta, -90-theta/2 + .75*theta)

  arc(0,shift, rad-150, rad-150, -90-theta/2+.75*theta, -90+theta/2)

​

​

  theta -= 1

  span += theta<180 ? 1.1 : 0

  if (theta<=0){

    noLoop()

  }

​

}