JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

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>

CSS

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

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]
});

html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, .75).hex;

function updateVal(value, total, R, hand, id) {
    if (total == 31) { // month
        var d = new Date;
        d.setDate(1);
        d.setMonth(d.getMonth() + 1);
        d.setDate(-1);
        total = d.getDate();
    }
    var color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)");
    if (init) {
        hand.animate({
            arc: [value, total, R]
        }, 900, ">");
    } else {
        if (!value || value == total) {
            value = total;
            hand.animate({
                arc: [value, total, R]
            }, 750, "bounce", function () {
                hand.attr({
                    arc: [0, total, R]
                });
            });
        } else {
        ...