JSFiddle - React, Tailwind, and code Playground

by webdevem

HTML

<div id="arcClock">
    <div id="secs"></div>
    <div id="mins"></div>
    <div id="hours"></div>
</div>

CSS

#arcClock {
    position: relative;
}
#secs, #mins, #hours {
    position: absolute;
}
#mins {
    top: 10px;
    left: 10px;
}
#hours {
    top: 17px;
    left: 17px;
}

JavaScript

function convertHours(whatHr) {
    return (100 / 12) * whatHr;
}

function convertMinSec(whatNum) {
    return (100 / 60) * whatNum;
}

function pieChart(percentage, size, color, offX, offY) {
    var svgns = "http://www.w3.org/2000/svg";
    var chart = document.createElementNS(svgns, "svg:svg");
    chart.setAttribute("width", size);
    chart.setAttribute("height", size);
    chart.setAttribute("viewBox", "0 0 " + size + " " + size);
    // Background circle
    var back = document.createElementNS(svgns, "circle");
    back.setAttributeNS(null, "cx", size / 2);
    back.setAttributeNS(null, "cy", size / 2);
    back.setAttributeNS(null, "r", size / 2);
    back.setAttributeNS(null, "fill", "#fff");
    chart.appendChild(back);
    // primary wedge
    var path = document.createElementNS(svgns, "path");
    var unit = (Math.PI * 2) / 100;
    var startangle = 0;
    var endangle = percentage * unit - 0.001;
    var x1 = (size / 2) + (size / 2) * Math.sin(startangle);
    var y1 = (size / 2) - (size / 2) * Math.cos(startangle);
    var x2 = (size / 2) + (size / 2) * Math.sin(endangle);
    var y2 = (size / 2) - (size / 2) * Math.cos(endangle);
    var big = 0;
    if (endangle - startangle > Math.PI) {
        big = 1;
    }
    var d = "M " + (size / 2) + "," + (size / 2) + // Start at circle center
    " L " + x1 + "," + y1 + // Draw line to (x1,y1)
    " A " + (size / 2) + "," + (size / 2) + // Draw an arc of radius r
    " 0 " + big + " 1 " + // Arc details...
    x2 + "," + y2 + // Arc goes to to (x2,y2)
    " Z"; // Close path back to (cx,cy)
    path.setAttribute("d", d); // Set this path 
    path.setAttribute("fill", color);
    chart.appendChild(path); // Add wedge to chart
    // foreground circle
    var front = document.createElementNS(svgns, "circle");
    front.setAttributeNS(null, "cx", (size / 2));
    front.setAttributeNS(null, "cy", (size / 2));
    front.setAttributeNS(null, "r", (size * 0.35));
    front.setAttributeNS(null, "fill",...