JSFiddle - React, Tailwind, and code Playground

HTML

<div id="raphbox"></div>

CSS

#raphbox {
    width: 600px;
    height: 600px;
}

JavaScript

/* Takes the number of minutes, m, and draws an arc.
 * Arc is to show the position of m minutes on a clock face.
 */
function redrawArc (m) {
    var coords = getEndCoords(m);
    arc.attr({'path' : "M350,30 A 270 270 0 0 1 "+coords.x+" "+coords.y+""});
    trackball.attr({cx : coords.x, cy : coords.y, r : 12});
    txt.attr({x : coords.x, y : coords.y, text : coords.m});
}
/* Does the same as the above, but animates the motion. */
function redrawArcAnimated (m) {
    var t = 500;
    var coords = getEndCoords(m);
    var arc_ani = Raphael.animation({'path' : "M350,30 A 270 270 0 0 1 "+coords.x+" "+coords.y+""}, t);
    var trackball_ani = Raphael.animation({cx : coords.x, cy : coords.y, r : 12}, t);
    var txt_ani = Raphael.animation({x : coords.x, y : coords.y, text : coords.m}, t);
    
    arc.animate(arc_ani);
    trackball.animate(trackball_ani);
    txt.animate(txt_ani);
}
/* Returns the endpoint of the arc given the number of minutes. */
function getEndCoords (m) {
    //Get the angle and swivel the thing so it starts at the top, like a clock.
    var ang = 6 * m - 90;
    //Endpoint is given using simple trig.
    var x = 350 + 270 * Math.cos(ang * Math.PI / 180);
    var y = 300 + 270 * Math.sin(ang * Math.PI / 180);
    return {x : x, y : y, m : m};
}


var paper = new Raphael('raphbox');

var coords = getEndCoords(15);

var clockface = paper.circle(350, 300, 220)
    .attr({
        'stroke' : '#777777',
        'fill' : '#cccccc',
        'stroke-width' : 2,
        'transform' : 't-200,0'
    });
var clocktxt = paper.text(350, 300, 'The Clock')
   .attr({
        'stroke-opacity' : "0",
        'fill' : "#333333",
        'font-family' : 'Arial',
        'font-size' : '18',
        'transform' : 't-200,0'
    });

var arc = paper.path("M350,30 A 270 270 0 0 1 "+coords.x+" "+coords.y+"")
    .attr({
        'stroke' : '#3333cc',
        'stroke-width' : 7,
        'transform' : 't-200,0'
    });
var ball = paper.circle(350, 30, 6)
    .attr({
     ...