reloj

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reloj</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  
<script>  
var timer = setInterval(update, 1000);

function update() {
  d = new Date();
  s = d.getSeconds();
  m = d.getMinutes();
  h = d.getHours();

posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
  posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
  d3.select("circle#punto").attr("transform","translate("+posX+" "+posY+")");
  
  d3.select("line#hora").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + "  )");
  d3.select("line#minutos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + "  )");
  d3.select("line#segundos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + "  )");
  d3.select("text#digital").text(d.toLocaleTimeString());
}

var width = 500, height = 500;
var posX, posY;

var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var escala_sm = d3.scaleLinear().domain([0,60]).range([0,360]);
var escala_h  = d3.scaleLinear().domain([0,12]).range([0,360]);

var x = d3.scaleLinear().domain([0,60]).range([0,2*Math.PI]);

var d = new Date();
var s = d.getSeconds(); // 0 .. 59
var m = d.getMinutes(); // 0 .. 59
var h = d.getHours();   // 0 .. 23

svg.append("circle")
   .attr("cx", width/2)
   .attr("cy", height/2)
   .attr("r",  width/2)
   .attr("fill","steelblue")
  
svg.append("line")
   .attr('id','hora')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + "  )")
   .attr("y2",-1 * width/2 * 0.50)
   .attr("stroke","white")
   .attr("stroke-width","4");

svg.append("line")
   .attr('id','minutos')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + "  )")
   .attr("y2",-1 * width/2 * 0.75)
   .attr("stroke","white")
   .attr("stroke-width","2");

svg.append("line")
   .attr('id','segundos')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + "  )")
   .attr("y2",-1 * width/2 * 0.75)
   .attr("stroke","white")
   .attr("stroke-width","1");

svg.append("text")
   .attr("id","digital")
   .attr("x",width/2)
   .attr("y",0.90 * height)
   .attr("text-anchor","middle")
   .attr("font-size",50)
   .attr("fill","white")
   .text(d.toLocaleTimeString())

posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
svg.append("circle").attr('id','punto').attr("r",5)
   .attr("fill","white")
   .attr("transform","translate("+posX+" "+posY+")");  
</script>
  
</body>
</html>

https://d3js.org/d3.v5.min.js