#vcent
#linear.animated
  p Linear
#adjusted.animated
  p Adjusted

html, body
  height: 100%
  
body
  text-align: center
  background: #333

div
  display: inline-block
  vertical-align: middle
    
#vcent
  height: 100%
  
.animated
  position: relative
  height: 144px
  width: 144px
  margin: -18px 48px 0
  background-color: green
  border-radius: 24px 0
  
  p
    position: absolute
    left: 0
    bottom: -36px
    font: 12px/36px sans-serif
    text-transform: uppercase
    color: #bbc0c0

;(function(id1, id2) {
  var
  linStep = 0,
  adjStep = 0,
  direction = 1,
  cycleTime = 4000, //cycles / second
  resolution = 180, //changes / cycle
  delta = 120 / resolution, // hue 0 -> 120
  element1 = document.getElementById(id1), //linear
  element2 = document.getElementById(id2), //adjusted
  startTick = function ( fn ) {
    var tick = function () {
      setTimeout( function () {
        fn();
        requestAnimationFrame( tick );
      }, cycleTime / resolution );
    };
    requestAnimationFrame( tick );
  };

  startTick(function() {
    var
    cos = Math.cos,
    floor = Math.floor,
    omega = 2 * Math.PI * 3 / 360, // angular frequency
    d1, d2;
    
    linStep += direction;
    d1 = floor(linStep * delta);
    
    adjStep += direction * (1 + cos(omega * d1)); // + 1 moves range to 0, 2
    d2 = floor(adjStep * delta);

    if (!linStep || linStep === resolution) { // check bounds
      direction = 0 - direction;
    }
    
    element1.style.backgroundColor = 'hsl(' + d1 + ', 100%, 50%)';
    element2.style.backgroundColor = 'hsl(' + d2 + ', 100%, 50%)';
  });
})('linear', 'adjusted');