JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

CSS

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

JavaScript

var svg = document.querySelector('svg');
var points = [
    [0, 0],
    [100, 50],
    [0, 100],
    [0, 200],
    [200, 200]
];
points.forEach(function (point, i, points) {
    if (!i) return;
    var start = points[i-1];
    var end = point;
    
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     //Math.round((axisx.p2c(x1) + xoffset + axisx.p2c(x2) + xoffset) / 2), axisy.p2c(y1) + yoffset,
    var x = Math.round((start[0] + end[0]));
    //var y = Math.round((start[0] + end[1]) / 2);
    var controlA = x + ',' + start[1];
    var controlB = x + ',' + end[1];
console.log(controlA, controlB, start, end)
    path.setAttribute('d', 'M' + start.join(',') + ' C' + controlA + ' ' + controlB + ' ' + end.join(','));
    path.setAttribute('stroke', 'black');
    path.setAttribute('stroke-width', 1);
    path.setAttribute('fill', 'none');
    svg.appendChild(path);
});