JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

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

JavaScript

var hour_hand;
var minute_hand;
var hours = 12;
var minutes = 32;

function draw_clock(){                
    canvas = Raphael("clock_id",100, 100);
    var clock = canvas.circle(40,40,36);
    clock.attr({"fill":"#FFCC00","stroke":"#0763BF","stroke-width":"3"})  
    var hour_sign;
    hour_hand = canvas.path("M40 40 L40 15");
    hour_hand.attr({stroke: "#5c5c6E", "stroke-width": 1});
    minute_hand = canvas.path("M40 40L40 5");
    minute_hand.attr({stroke: "#5c5c6E", "stroke-width": 1});
    var pin = canvas.circle(40, 40, 3);
    pin.attr({"fill":"#0E254C","stroke":"#0E254C"});    
    update_clock()
}
			
function update_clock(){
    var hour_hand_transform = "r"+(30*hours) + ",40, 40";
    //var hour_hand_transform = "r"+(30*hours+(minutes/2.5)) + ",40, 40";
    var minute_hand_transform = "r"+(1*minutes) + ",40, 40";
    //alert(hour_hand_transform);
    hour_hand.transform(hour_hand_transform);
    minute_hand.transform(minute_hand_transform);   
}
draw_clock();