JSFiddle - React, Tailwind, and code Playground

by cristighenea

HTML

<div id="holder"></div>         <div id="time"> 
             <span id="h"></span>:<span  id="m"></span>:<span id="s"></span> <span  id="ampm"></span> · <span id="d"></span>/<span  id="mnth"></span> 
        </div>

JavaScript

var r = Raphael("holder", 600, 600), 
                    R = 200, 
                    init = true, 
                    param = {stroke: "#fff", "stroke-width": 30}, 
                    hash = document.location.hash, 
                    marksAttr = {fill: hash || "#444", stroke: "none"}, 
                    html = [ 
                        document.getElementById("h"), 
                        document.getElementById("m"), 
                        document.getElementById("s"), 
                        document.getElementById("d"), 
                        document.getElementById("mnth"), 
                        document.getElementById("ampm") 
                    ]; 
                // Custom Attribute 
                r.customAttributes.arc = function (value, total, R) { 
                    var alpha = 360 / total * value, 
                        a = (90 - alpha) * Math.PI / 180, 
                        x = 300 + R * Math.cos(a), 
                        y = 300 - R * Math.sin(a), 
                        color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)"), 
                        path; 
                    if (total == value) { 
                        path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]]; 
                    } else { 
                        path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; 
                    } 
                    return {path: path, stroke: color}; 
                }; 
 
                drawMarks(R, 60); 
                var sec = r.path().attr(param).attr({arc: [0, 60, R]}); 
                R -= 40; 
                drawMarks(R, 60); 
                var min = r.path().attr(param).attr({arc: [0, 60, R]}); 
                R -= 40; 
                drawMarks(R, 12); 
                var hor = r.path().attr(param).attr({arc: [0, 12, R]}); 
                R -= 40; 
                drawMarks(R, 31); 
                var day = r.path().attr(param).attr({arc:...