SOURCE

timer();
function timer() {
  var d = new Date();
  min = d.getMinutes();
  sec = d.getSeconds();
  hr = d.getHours();
  if (hr < 10) hr = "0" + hr;
  if (d.getMinutes() < 10) min = "0" + d.getMinutes();
  if (d.getSeconds() < 10) sec = "0" + d.getSeconds();
  document.getElementById("title").innerHTML = "" + hr + ":" + min + ":" + sec;

  document.getElementById("wavethree").style.marginTop = "-" + (d.getSeconds() + 2) * 2.5 + "%";
  document.getElementById("wavetwo").style.marginTop = "-" + (d.getMinutes() + 2) * 2.4 + "%";
  document.getElementById("waveone").style.marginTop = "-" + (d.getHours() + 2) * 2.3 + "%";

  var x2 = document.getElementById("wavethree").style.marginTop;
  console.log(x2);
  var x3 = document.getElementById("wavethree").style.top;

}

setInterval(timer, 100);

<div class='box'>
  <div class="wave" id='waveone' style="margin-top:-10%;">
  </div>
  <div class="wave" id='wavetwo' style="margin-top:-10%;">
  </div>
  <div class="wave" id='wavethree' style="margin-top:-10%;">
  </div>
  <div class='title' id="title">
    Timer
  </div>
</div>

html,
body {
  height: 100%;
}

html {
  background: #00BCD4;
  overflow: hidden;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.box {
  width: 350px;
  height: 600px;
  border-radius: 5px;
  box-shadow: 9px 10px 47px 2px rgba(0, 0, 0, 1.0);
  background: #1A237E;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.wave {
  opacity: 1;
  position: absolute;
  left: 50%;
  background: #0277BD;
  width: 500px;
  height: 600px;
  margin-left: -250px;
  border-radius: 43%;
}

#waveone {
  -webkit-animation: drift 3000ms infinite linear;
  animation: drift 3000ms infinite linear;
}

#wavethree {
  -webkit-animation: drift 2500ms infinite linear;
  animation: drift 2500ms infinite linear;
  background: #2196F3;
  opacity: .5;
}

#wavetwo {
  -webkit-animation: drift 5000ms infinite linear;
  animation: drift 5000ms infinite linear;
  opacity: .9;
  background: #4FC3F7;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, #42A5F5, #BBDEFB 80%, rgba(92, 107, 192, 0.3));
  background: linear-gradient(to bottom, #42A5F5, rgba(40, 53, 147, 0.2) 80%, #1A237E);
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  line-height: 300px;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: white;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .4em;
  font-size: 42px;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);
  text-indent: .3em;
}

@-webkit-keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}