JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas"></div>

JavaScript

var data = [
    [{x: 50, y: 207}, {x: 50, y: 371},{x: 34, y: 209}, {x: 39, y: 34},{x: 32, y: 216}, {x: 58, y: 38}

   
],
    paper = Raphael("canvas", 400, 300),
    path;
for (var c = 0; c < data.length; c += 1) {
    path = "M" + data[c][0].x + "," + data[c][0].y;

    path += "H" + (data[c][1].x-5);
    if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
    else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";

    path += "V" + (data[c][1].y);
    paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
}