JSFiddle - React, Tailwind, and code Playground

by lasitha_prabodha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<div id="canvas"></div>

JavaScript

var data = [
    // main path
     [{
      x: 40,
      y: 382.4375
    }, {
      x: 40+50,
      y: 382.4375
    }], 


/*
endX: 252.625
endY: 59.09375
startX: 40
startY: 382.4375
*/

    // 1 upper
    [{
      x: 40 + 50, // start x
      y: 382.4375 // start y
    }, {
      x: 45 + 50, // end x
      y: 59.09375 // end y
    }],



    [{
      x: 382.4375,
      y: 59.09375 - 20
    }, {
      x: 45 + 70,
      y: 50 + 10
    }],





    // 2 lower
    [{
      x: 245,
      y: 100
    }, {
      x: 250,
      y: 150
    }],



    [{
      x: 300,
      y: 160
    }, {
      x: 270,
      y: 150
    }],



    // straight line
    [{
      x: 245,
      y: 100
    }, {
      x: 250,
      y: 100
    }],
    [{
      x: 250,
      y: 100
    }, {
      x: 300,
      y: 100
    }],

  ],
  paper = Raphael("canvas", 600, 600),
  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);

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

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