JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>

CSS

svg.clock {
    stroke-linecap: round;
}

.face {
    stroke: #aac;
}

.tens.face {
  stroke-width: 3;
}

.fives.face {
  stroke-width: 2;
}

.ones.face {
    stroke-width: 2;
}

JavaScript

var showD3Clock = function() {

  var w = 640             // Width of SVG element
  var h = 640             // Height of SVG element

  var cx = w / 2          // Center x
  var cy = h / 2          // Center y
  var margin = 4
  var r = w / 2 - margin  // Radius of clock face

  var svg = d3.select("body").append("svg")
    .attr("class", "clock")
    .attr("width", w)
    .attr("height", h)

  makeClockFace()

  // Update hand positions once per second

  function makeClockFace() {
    var tens = Math.round(r * 0.2)
    var fives = Math.round(r * 0.1)
    var ones = Math.round(r * 0.05)
    for (var i = 0; i < 360; ++i) {
      var tickLength, tickClass
      if ((i % 10) == 0) {
        tickLength = tens
        tickClass = "tens"
      } else if((i % 5) == 0){
      	tickLength = fives
        tickClass = "fives"
      }
      else {
        tickLength = ones
        tickClass = "ones"
      }
      svg.append("line")
        .attr("class", tickClass + " face")
        .attr("x1", cx)
        .attr("y1", margin)
        .attr("x2", cx)
        .attr("y2", margin + tickLength)
        .attr("transform", "rotate(" + i + "," + cx + "," + cy + ")")
    }
  }



}

showD3Clock()