html,
body {
  width: 100%;
  height: 100%;  
}

body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

const delayFinalDeg = 360;
let arcs = [];

function setup() {
  createCanvas(300, 300);
  
  // generate arc items
  for(let i = 0; i < 30; i++) {
    arcs.push({
      arcWidth: random(50, width),      
      color: color(random(255), random(255), random(255)),
      weight: random(1, 3),
      arcLength: radians(random(30, 120)),
      delayDeg: random(360),
      startDegree: random(360),
    })
  }  
}

function draw() {
  background(0);
    
  arcs.forEach(arcItem => {
    moveArcLine(arcItem);
  })  
}

function moveArcLine(arcLine) {
  let {
    delayDeg,
    arcWidth,
    startDegree,
    color,
    weight,
    arcLength
  } = arcLine;
  // easing
  arcLine.delayDeg += (delayFinalDeg - delayDeg) * 0.05;  
  
  noFill();
  stroke(color);
  strokeWeight(weight);
  arc(width/2, height/2, arcWidth, arcWidth, radians(delayDeg + startDegree) - arcLength, radians(delayDeg + startDegree));

  if (delayDeg > delayFinalDeg - 1) arcLine.delayDeg = 0; 
}