SOURCE

setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)

<div id="clock-container">
  <svg id="clock" viewBox="0 0 100 100">
    <circle id="face" cx="50" cy="50" r="45"/>
    <g id="hands">
      <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
      <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
      <line id="sec" x1="50" y1="50" x2="50" y2="16" />
    </g>
  </svg>
</div>

body {
  margin: 0;
  background: midnightblue;
}
#clock-container { 
  display: inline-block;
  position: relative;
  width: 35%;
  vertical-align: middle;
  overflow: hidden;
  background: midnightblue;
} 
#face { stroke-width: 2px; stroke: #fff; }
#hour, #min, #sec { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec { stroke: #f55; }