I am fairly new to D3 and generated a segmented arc/half donut chart as shown below

I used d3.pie and arc to generate this segmented arc chart. Code below:

let pieGenerator = d3
  .pie()
  .startAngle(-0.75 * Math.PI)
  .endAngle(0.75 * Math.PI)
  .padAngle(0.05)
  .sort(null);

let pieGeneratorForeground = d3.pie().startAngle(-0.75 * Math.PI);

var data = [60, 20, 20, 20, 40];

// Create an arc generator with configuration
var arcGenerator = d3.arc().innerRadius(85).outerRadius(100).cornerRadius(5);

var arcData = pieGenerator(data);
console.log(arcData);

// Create a path element and set its d attribute
let arc = d3
  .select("g")
  .selectAll("path")
  .data(arcData)
  .join("path")
  .attr("d", arcGenerator);

What I would like to do is fill up the arc, starting from the left end, to whatever value from 250-850 with a transition. I'm having a hard time finding an example to do this with the use of d3.pie and d3.arc (since that's what I used to generate the segmented arc). Examples I looked at are: arc-progress, arc-gauge Any help or links would be much appreciated. I know I need to use a tween function but I wasn't sure how a tween function could 'fill'/transition the foreground arc between the segmented gaps. Here is a link to a working example of what I have so far: codepen