JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M10,20 
C135,145 145,155 170,160 
C182.55976865553593,156.4556876849735 188.12980775296646,168.2156249605718 200,40
C243.7919636649709,56.391185985060204 262.1523720561628,68.56952558876743 300,40"
          style="stroke:#660000; fill:none;"/>
</svg>

CSS

svg {
  width: 500px;
  height: 250px;
  border: 1px solid black;
}

JavaScript

function interpolateBetween(x0,y0,x1,y1,x2,y2,x3,y3,smooth_value) {
    
       // Assume we need to calculate the control
    // points between (x1,y1) and (x2,y2).
    // Then x0,y0 - the previous vertex,
    //      x3,y3 - the next one.

    var xc1 = (x0 + x1) / 2.0;
    var yc1 = (y0 + y1) / 2.0;
    var xc2 = (x1 + x2) / 2.0;
    var yc2 = (y1 + y2) / 2.0;
    var xc3 = (x2 + x3) / 2.0;
    var yc3 = (y2 + y3) / 2.0;

    var len1 = Math.sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    var len2 = Math.sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    var len3 = Math.sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

    var k1 = len1 / (len1 + len2);
    var k2 = len2 / (len2 + len3);

    var xm1 = xc1 + (xc2 - xc1) * k1;
    var ym1 = yc1 + (yc2 - yc1) * k1;

    var xm2 = xc2 + (xc3 - xc2) * k2;
    var ym2 = yc2 + (yc3 - yc2) * k2;

    // Resulting control points. Here smooth_value is mentioned
    // above coefficient K whose value should be in range [0...1].
    var ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
    var ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

    var ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
    var ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;
    
    return { 
         x1: ctrl1_x, 
         y1: ctrl1_y,
         x2: ctrl2_x,
         y2: ctrl2_y
    }
};

console.log(interpolateBetween(10,20,30,40,50,60,70,40,0.5))
console.log(interpolateBetween(70,40,80,53,90,67,100,40,0.5))
console.log(interpolateBetween(200,40,235,53,270,67,300,40,0.5))