JSFiddle - React, Tailwind, and code Playground

HTML

<body><div id="arrows"></div></body>

CSS

body {
    height: 1000px;
    position: relative;
    width: 1000px;
}
#arrows {
    display: block;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
}
#arrows circle,
#arrows path {
    stroke-opacity: 1;
    stroke-width: 2;
}

JavaScript

console.log('test');
var $canvas, HEIGHT, WIDTH, arrow_1, center, paper, radius, stroke;
$canvas = document.getElementById('arrows');
paper = Raphael($canvas, 500, 500);
WIDTH = 500;
HEIGHT = 500;
center = [WIDTH / 2, HEIGHT / 2];
radius = 230;
stroke = 5;
paper.customAttributes.arc = function(center_x, center_y, degrees, radius) {
    var arc_x, arc_y, path, radians;
    if (!radius) {
        return;
    }
    radians = (90 - degrees) * Math.PI / 180;
    arc_x = center_x + radius * Math.cos(radians);
    arc_y = center_y - radius * Math.sin(radians);
    path = [['M', center_x, center_y - radius], ['M', center_x, center_y - radius], ['A', radius, radius, 0, +(degrees > 180), 1, arc_x, arc_y]];
    return {
        path: path
    };
};
arrow_1 = paper.path();
arrow_1.node.setAttribute('class', 'arrow_1');
arrow_1.attr({
    arc: [center[0], center[1], 80, radius]
});
arrow_1.attr({ 'arrow-end': 'classic-wide-long', 'arrow-start': 'classic-wide-long' });
return arrow_1.rotate(80, center[1], center[0]);