JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

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

CSS

html,body { margin:0px; padding:0px; background : #ffffff; }

JavaScript

window.onload = function () {
  var r = Raphael('raphael_canvas', 465, 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);
    }
  })();
  
  for (var i = 0; i < 12; ++i)
    drawTrapezium(4, 16, 2, 0, center, center + 180 -16).rotate(i * 30, center , center);
    
  var hour = drawTrapezium(6, -90, 10, 5, center, center, 0xdc143c),
      min = drawTrapezium(5, -130, 8, 5, center, center, 0x228b22),
      sec = drawTrapezium(3, -150, 5, 5, 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:"none"});
  }
  
  function _updateView(h, m, s) {
    setRotation(hour, (h % 12) * 30 + m / 2, center, center); 
    setRotation(min, m * 6, center, center);
    setRotation(sec, s * 6, center, center);
  }
  
  function setRotation(node, angle, centerX, centerY) {
    node.attr({rotation : angle + " " + centerX + " " + centerY});
  }
}