Simple D3 Clock using Arcs & arcTween transitions

svg {
  background:#363636  ;
}

.second-tick{
stroke:chartreuse;
stroke-linecap:round;
stroke-width:2.5px;
}

#seconds {
  fill-rule: evenodd;
  fill: #aaa;
  stroke: chartreuse;
  stroke-linejoin:round;
  stroke-width: 2.5px;
}

#minutes {
  fill-rule: evenodd;
  fill: #aaa;
  stroke: chartreuse;
  stroke-linejoin:round;
  stroke-width: 5px;
}

#hours {
  fill-rule: evenodd;
  fill: #aaa;
  stroke: chartreuse;
  stroke-linejoin:round;
  stroke-width: 10px;
}

</style>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.js"></script>
    <script type="text/javascript">

var r = 200,
    m = 25;

var w = (r+m)*2,
    h = (r+m)*2;

var secondTickStart = r;
    secondTickLength = -15;

var secondScale = d3.scale.linear()
  .range([0,354])
  .domain([0,59]);

var fields = [
  {name: "hours", value: 0, size: 12},
  {name: "minutes", value: 0, size: 60},
  {name: "seconds", value: 0, size: 60}
];

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

var dynamics = svg.append("g")
    .attr("class", "dynamics")
    .attr("transform", "translate("+(r+m)+"," + (r+m) + ")");

var statics = svg.append("g")
    .attr("class","statics")
    .attr("transform", "translate("+(r+m)+"," + (r+m) + ")");

//add marks for seconds
  statics.selectAll('.second-tick')
    .data(d3.range(0,60)).enter()
      .append('line')
      .attr('class', 'second-tick')
      .attr('id', function(d){return d})
      .attr('x1',0)
      .attr('x2',0)
      .attr('y1',secondTickStart)
      .attr('y2', secondTickStart + secondTickLength)
      .style('stroke-width', function(d) {
          if( d%5==0 ) { return '10px'}
            return '2.5px'
      })
      .attr('transform',function(d){
        return 'rotate(' + secondScale(d) + ')';
      });

setInterval(function() {
  var now = new Date();
  fields[0].previous = fields[0].value; fields[0].value = now.getHours()+now.getMinutes()/60+now.getSeconds()/3600;//continuously moving hour hand rather than snapping
  fields[1].previous = fields[1].value; fields[1].value = now.getMinutes();
  fields[2].previous = fields[2].value; fields[2].value = now.getSeconds();

var path = dynamics.selectAll("path")
      .data(fields.filter(function(d) { return d.value; }), function(d) { return d.name; })
      .attr("id", function(d){return d.name;});

path.enter().append("path")
    .transition()
      .ease("elastic")
      .duration(750)
      .attrTween("d", arcTween);

path.transition()
      .ease("elastic")
      .duration(750)
      .attrTween("d", arcTween);

path.exit().transition()
      .ease("bounce")
      .duration(750)
      .attrTween("d", arcTweenEnd);
      //.remove();    //how to redraw at 0 position immediately after...

}, 1000);

function arcTween(b) {
  var i = d3.interpolate({value: b.previous}, b);
  return function(t) {
      return arc(i(t));
  };
}

function arcTweenEnd(b) {
  if(b.name == 'seconds' && b.value==0) {b.value=60};
  var i = d3.interpolate({value: b.previous}, b);
  b.value=0;
  return function(t) {
      return arc(i(t));
  };
}

</script>
  </body>

Modified http://mbostock.github.com/d3/d3.js?1.27.2 to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://mbostock.github.com/d3/d3.js?1.27.2