JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

HTML

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

JavaScript

var data = [
    [{x: 32, y: 207}, {x: 50, y: 371}],
    [{x: 34, y: 209}, {x: 39, y: 34}],
    [{x: 32, y: 216}, {x: 58, y: 38}],
    [{x: 70, y: 221}, {x: 93, y: 40}],
    [{x: 89, y: 223}, {x: 105, y: 41}],
    [{x: 113, y: 225}, {x: 150, y: 42}],
    [{x: 132, y: 228}, {x: 173, y: 43}],
    [{x: 305, y: 230}, {x: 354, y: 45}]
],
    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;
    path += "V" + data[c][1].y;
    paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
}