svg path is not at the specified location even thought the starting /end point is correct

const divs = document.querySelectorAll("[class^='spline']");

    for (let i = 0; i < levels.length - 1; i++) {
      const div1 = divs[i];
      const div2 = divs[i + 1];
      const rect1 = div1.getBoundingClientRect();
      const rect2 = div2.getBoundingClientRect();
      console.log(rect1, rect2);

      if (i % 2 === 0) {
        var x1 = rect1.x + rect1.width;
        var y1 = rect1.y + rect1.height / 2;
        var x2 = rect2.x + rect2.width / 2;
        var y2 = rect2.y;
      } else {
        var x1 = rect1.x;
        var y1 = rect1.y + rect1.height / 2;
        var x2 = rect2.x + rect2.width / 2;
        var y2 = rect2.y;
      }

      const cx1 = x1;
      const cy1 = y1;
      const cx2 = x2;
      const cy2 = y2;

      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
      updatedPaths.push(d);
    }

const divs = document.querySelectorAll("[class^='spline']");

    for (let i = 0; i < levels.length - 1; i++) {
      const div1 = divs[i];
      const div2 = divs[i + 1];
      const rect1 = div1.getBoundingClientRect();
      const rect2 = div2.getBoundingClientRect();
      console.log(rect1, rect2);

      if (i % 2 === 0) {
        var x1 = rect1.x + rect1.width;
        var y1 = rect1.y + rect1.height / 2;
        var x2 = rect2.x + rect2.width / 2;
        var y2 = rect2.y;
      } else {
        var x1 = rect1.x;
        var y1 = rect1.y + rect1.height / 2;
        var x2 = rect2.x + rect2.width / 2;
        var y2 = rect2.y;
      }

      const cx1 = x1;
      const cy1 = y1;
      const cx2 = x2;
      const cy2 = y2;

      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
      updatedPaths.push(d);
    }