JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<div id='test'></div>

JavaScript

var p1 = 'M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0';
var p2 = 'M15,50a50,90 0 1,0 180,0a60,50 0 1,0 -100,0L150,150Z';

var r = Raphael('test',800,800);

var path1 = r.path(p1);
var path2 = r.path(p2);

var intersect = Raphael.pathIntersection( p1, p2 );

var curves2 = Raphael.path2curve( p2 );
var curves1 = Raphael.path2curve( p1 );

console.log( curves1 );

var seg1 = intersect[0].segment1;
var seg2 = intersect[0].segment2;

var c1 = r.circle(intersect[0].x, intersect[0].y, 5)

var path1PrevSeg = curves1[ seg1 - 1 ];

var path1String = 'M' + [path1PrevSeg[ path1PrevSeg.length - 2  ], path1PrevSeg[ path1PrevSeg.length - 1 ]];
path1String += curves1[ seg1 ];



var pathSegMatch1 = r.path( path1String ).attr({ stroke: 'red', 'stroke-width': 10 });

var subPath1 = pathSegMatch1.getSubpath( pathSegMatch1.getTotalLength() * intersect[1].t1, pathSegMatch1.getTotalLength() * intersect[0].t1 );

//NOTE, THE FIRST EXAMPLE IS SIMPLER JUST BECAUSE BOTH POINTS ARE ON SAME SEGMENT
//YOU WILL NEED TO BUILD UP subPath FROM MULTIPLE SEGMENTS IF THE SEGMENTS ARE 2 AND 4 FOR EXAMPLE
// AND NOT 2 AND 2

r.path( subPath1 ).attr({ stroke: 'yellow', 'stroke-width' : 5 });