JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<body>                
    <div id="paper1" ondragstart="return false"  onselectstart="return false">
    </div>
</body>

JavaScript

var path = "M50.975,83.158C79.822,82.37700000000001,81.971,83.114,84.97999999999999,83.15700000000001V85.03200000000001Z"
 
// no intersections ...
//var zigzag = "M69.575,90.190 L69.575,28.290"

// uncomment for intersections ...
var zigzag = "M69.575,90.190 L69.575,27.290"

var paper = Raphael(0, 0, 10000, 10000);

paper.path(path).attr({stroke: 'red',"stroke-width": 30})
paper.path(zigzag).attr({stroke: 'blue', "stroke-width": 3})

var intersections = Raphael.pathIntersection(path, zigzag)

intersections.forEach(function(co) {
  paper.circle(co.x, co.y, 1).attr({stroke: 'none', fill: 'white',  "stroke-width": 300})
})