<div class="wrapper">
  <svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 142 142" enable-background="new 0 0 142 142" xml:space="preserve">

  <style>
    @import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,600,700");
    text { font-family: 'Lato'; font-weight: 400; }
  </style>

  <clipPath id="c1"><path d="M105.8,11C100.1,7.7,94,5.3,87.9,3.7c-0.5-0.2-0.9-0.3-1.3-0.3c-3.6-0.6-7.3,1.1-9.2,4.5
  c-1.6,3-1.1,6.7,1,9.5c1.2,1.5,2.6,2.3,4.1,2.8c0.4,0.1,0.7,0.2,1,0.2c6.3,1.5,12.4,4.3,18,8.4c20.1,14.5,27,41.7,16.2,64.1
  c-13.7,28.2-48.8,37.8-74.8,20.7C21.1,99.3,13.4,70.4,25.4,47.2c7.2-14.1,19.9-23.4,33.9-26.7c0.2,0,0.4-0.1,0.6-0.1
  c2.5-0.7,4.7-2.6,5.7-5.3c1.3-3.4,0.1-7.4-2.7-9.8c-2.1-1.6-4.5-2.2-6.8-1.8c-0.5,0.1-1,0.2-1.5,0.3C36.8,8.2,20.6,19.8,10.9,37.5
  c-18.1,33.1-5.9,75,27,93.4c32.8,18.3,74.2,6.9,93.1-25.7C150,72.1,138.8,30,105.8,11z" /></clipPath>
  <clipPath id="c2"><path d="M95.1,103.7c16.6-12,21.6-34.8,11.7-52.7c-4.3-7.8-10.8-13.6-18.2-17.2c-0.1,0-0.2-0.1-0.3-0.1
    c0,0-0.1-0.1-0.1,0c-2.9-1.3-6.3-0.9-9,1.5s-3.4,6.2-1.9,9.6c0.9,1.9,2.3,3.4,4.1,4.2c0.1,0.1,0.1,0,0.2,0.1l0,0
    c4,1.9,7.6,5,10.1,9c7.1,11.4,3.2,27-8.5,33.6c-11.7,6.7-26.9,2.4-33.3-9.9c-4.4-8.7-3.1-19.4,3.2-26.8c2.3-2.6,4.8-4.5,7.6-5.9
    c0,0,0,0,0.1-0.1l0.1-0.1c0.3-0.2,0.4-0.3,0.7-0.4c3.9-2.4,5.1-7.5,2.7-11.4c-2.3-3.7-6.8-4.9-10.6-3.2c-0.1,0.1-0.2,0.1-0.3,0.2
    c-1.2,0.6-2.4,1.3-3.6,2c-19.1,11.9-24.9,37-13,56.1C49,112.1,75.7,117.6,95.1,103.7z" /></clipPath>

    <text class="displayH f1" x="71" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    <g id="handH">
      <ellipse class="f1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -29.0876 71.0443)" cx="71.2" cy="70.6" rx="13.4" ry="13.3"/>
      <text id="handTextH" class="displayH f2" x="71" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    </g>

    <text class="displayM f1" x="103.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    <g id="handM" clip-path="url(#c2)">
      <circle class="f1 circleM" cx="50%" cy="50%" r="71" />
      <text id="handTextM" class="displayM f2" x="103.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    </g>

    <text class="displayS f1" x="131.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    <g id="handS" clip-path="url(#c1)">
      <circle class="f1 circleS" cx="50%" cy="50%" r="71" />
      <text id="handTextS" class="displayS f2" x="131.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
    </g>
  </svg>
</div>
$color-primary: #2cb397;
$color-secondary: #fff;

.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 600px;
  color: $color-primary;
  padding: 10px;
}

.f1 {
  fill: $color-primary;
}

.f2 {
  fill: $color-secondary;
}
View Compiled
var last = new Date();
var lastSecond = 0;
var delta = 0;

function lerp(o,t,p) { return o + (t-o) * p; }

var sDeg = 0;
function seconds(s,ms) {

  var target = s/60 * 360;
  if (target===0 && sDeg > 300) { sDeg = -6; } // Wrapping
  sDeg = lerp(sDeg,target,delta*24);

  hs.transform('R '+sDeg+',71,71');
  hts.transform('R '+(sDeg*-1)+',71,71');

}

var mDeg = 0;
function minutes(m,s) {
  var target = m/60 * 360;
  if (target===0 && mDeg > 300) { mDeg = -6; } // Wrapping
  mDeg = lerp(mDeg,target,delta*24);
  hm.transform('T0,0 R '+mDeg+',71,71');
  htm.transform('T0,0 R '+(mDeg*-1)+',71,71');
}

function hours(h,m) {
  var deg = (h+(m/60))/12 * 360;
  hh.transform('T0,0 R '+deg+',71,71');
  hth.transform('T0,0 R '+(deg*-1)+',71,71');
}

function updateTimes(s,m,h) {

  var i,
  elS = document.getElementsByClassName('displayS'),
  elM = document.getElementsByClassName('displayM'),
  elH = document.getElementsByClassName('displayH');

  function pad(num) {
    var str = num.toString();
    return str.length>1 ? str : '0'+str;
  }

  for (i=0; i<elS.length; i++) { elS[i].innerHTML = pad(s); }
  for (i=0; i<elM.length; i++) { elM[i].innerHTML = pad(m); }
  for (i=0; i<elH.length; i++) { elH[i].innerHTML = pad(h); }

}

function draw() {
  var now = new Date();
  delta = (now.getTime()-last.getTime()) / 1000;
  last = now;

  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var ms = now.getMilliseconds();

  seconds(s,ms);
  minutes(m,s);
  hours(h,m);

  if (s !== lastSecond) { updateTimes(s,m,h); }
  lastSecond = s;

  window.requestAnimationFrame(draw);

}

var c = Snap('#clock');
var hs = c.select('#handS');
var hts = c.select('#handTextS');
var hm = c.select('#handM');
var htm = c.select('#handTextM');
var hh = c.select('#handH');
var hth = c.select('#handTextH');

if (hs && hm && hh) {

  draw();

} else {

  console.log('Not all elements could be found.');

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js