How to make gradual filling from left to right of an element with fill?

Question

SVG

How to incrementally fill an element from left to right?

Now I'm solving the problem by creating a set of paths, but the graph is still growing in steps. The only solution that comes to mind is to break up the sections even more, maybe there is a better way?

UPD: changed, now I change the path of the element. I don't make many different ones.

const lineData = [
      {x: 10, y: 10},
      {x: 20, y: 15},
      {x: 30, y: 50},
      {x: 40, y: 80},
      {x: 50, y: 80},
      {x: 60, y: 50},
      {x: 70, y: 90},
      {x: 80, y: 100},
      {x: 90, y: 110},
      {x: 100, y: 120},
      {x: 110, y: 160},
      {x: 120, y: 180},
    ];

    const width = 500;
    const height = 500;
    let current = 0;
    let pathArr = [];

    const svgContainer = d3.select('#graph')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);

    svgContainer.append('line')
      .attr('id', 'line')
      .attr('x1', 0)
      .attr('x2', 0)
      .attr('x2', 500)
      .attr('y2', 0)
      .attr('stroke', 'black');

    svgContainer.append('path')
      .attr('id', 'path')
      .attr('fill', 'red');


    const lineFunction = d3.line().context(null)
      .x(function (d) { return d.x })
      .y(function (d) { return d.y });

    setTimeout(lineGraph, 100);

    function lineGraph() {
      if (current < lineData.length - 1) {
        pathArr = [
          ...pathArr,
          {x: lineData[current].x, y: 0},
          lineData[current],
          lineData[current + 1],
          {x: lineData[current + 1].x, y: 0}
        ];

        d3.select('path')
          .attr('d', lineFunction(pathArr));

        current++;

        setTimeout(lineGraph, 100);
      }

      d3.select('#line')
        .attr('transform', `translate(0, ${ lineData[current].y })`);
    }

Answer 1

Clip-path , equal to the element (in orange highlighted how it should look), another obviously much larger element (with which you will fill) receives the clip-path attribute, which receives the identifier of the one created in the first step (in blue, shown how it should look).
With the second element, do whatever you want, transform it as you like - it is drawn only in the specified area (and the area we have is equal to the element, graphics, or whatever you have).