JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="raphael_canvas"></div>

JavaScript

window.onload = function () {
  var r = Raphael('raphael_canvas', 540, 465);
  var center = 465 >> 1;
  var updateView = (function() {
    var sec;
    return function () {
      var now = new Date, now_sec = now.getSeconds();
      if (now_sec == sec) return;
      var hour = now.getHours(), min = now.getMinutes();
      
      _updateView(hour, min, sec = now_sec);
    }
  })();
  var R = 100;
  var zero, shape;
  for (i = 0; i < 360; ++i) {
    if (i % 60 == 0) {
      shape = drawTrapezium(2, 40, 8, 0, center, center-R).rotate(i, center , center);
      if (i == 0) zero = shape;
    } else if (i % 30 == 0) {
      drawTrapezium(1, 20, 4, 0, center, center-R).rotate(i, center , center);
    } else {
      drawTrapezium(0, 20, 0.3, 0, center, center-R, 0x999999).rotate(i, center , center)
      .insertBefore(zero);
    }
  }
    
  r.path("M-300,0Q0,-230,300,0").translate(center, center).attr({"stroke-width":10});
  r.circle(center, center, 50).attr({fill:"#000000"});
    
  var hour = drawTrapezium(6, -95, 8, -55, center, center, 0xdc143c),
      min = drawTrapezium(6, -95, 8, -55, center, center, 0x228b22),
      sec = drawTrapezium(3, -95, 5, -55, center, center, 0xeb6101);
    
  updateView();
  setInterval(updateView, 100);
  
  function drawTrapezium(right, top, left, bottom, centerX, centerY, color) {
    var commands = ['M', 'L', 'L', 'L', 'L'];
    var coordinates = [
      left, bottom, -left, bottom, -right, top, right, top, left, bottom
    ];
    var data = [];
    for (var i = 0; i < 5; ++i) {
      data.push(commands[i]);
      data.push(centerX + coordinates[2 * i], ",", centerY + coordinates[2 * i + 1]);
    }
    color = color ? color.toString(16) : "000000";
    while (color.length < 6) color = "0" + color;
    color = "#" + color;
    return r.path(data.join('')).attr({fill:color, stroke:color});
  }
  
  function _updateView(h, m, s) {
    setRotation(hour, (h % 12) * 30 + m / 2, center, center); 
    setRotation(min, m * 6, center,...