Clock based on Placekittens

kittenclock.html

<!-- Thanks to cybear https://gist.github.com/846273 for the clock and to placekittens.com for the images -->

<style>
div#clock{position:absolute;text-align:center;height:8em;top:40%;left:20%;margin:-4em 0 0 -16em}
head,title{display:block}
</style>
<script>
var bars = {
  // vertical
  0 : [0,0,0,1],
  1 : [0,1,0,2],
  2 : [1,0,1,1],
  3 : [1,1,1,2],
  // horizontal
  4 : [0,0,1,0],
  5 : [0,1,1,1],
  6 : [0,2,1,2],
};
var numbers = {
  0 : [0,1,2,3,4,6],
  1 : [2,3],
  2 : [1,2,4,5,6],
  3 : [2,3,4,5,6],
  4 : [0,2,3,5],
  5 : [0,3,4,5,6],
  6 : [0,1,3,4,5,6],
  7 : [2,3,4],
  8 : [0,1,2,3,4,5,6],
  9 : [0,2,3,4,5,6],
};
function draw(number, step){
  var buffer = '';
  var scale = 100;
  var url = 'http://placekitten.com/';
  for(var i=0; i<numbers[number].length; i++){
    var s = bars[numbers[number][i]];
    var left = (s[0] + step*1.7) * scale;
    var top = s[1] * scale;
    var width = Math.max(Math.floor(scale * 0.3 + Math.random()*6 - 3), (s[2] - s[0]) * scale)
    var height = Math.max(Math.floor(scale * 0.3 + Math.random()*6 - 3), (s[3] - s[1]) * scale)
					 buffer = buffer + "<div style='position:absolute; top: "+ top+ "px; left: "+ left+"px'><img src='" + url + width + "/" + height + "' /></div>"
  }
  return buffer;
}
function j(a,b){return Array(++b).join(a)}
function fav(r,g,b){
  return 'data:image/x-icon;base64,Qk3mHQAAAAAAADYAAAAoAAAAMgAAADIAAAABABgAAAAAALAdAAATCwAAEwsAAAAAAAAAAAAA'+btoa(j(j(String.fromCharCode(b,g,r),50)+"\0\0",50));
};
function t2h(d){var f=parseInt;return[f(11.1*d[0]),f(4.33*d[1]),f(4.33*d[2])]}
function t2d(d){
  function z(n){
   return n<10?'0'+n:n
  };
  return[z(d[0]),z(d[1]),z(d[2])];
}

function kittens(d){
  return "<div>" + draw(Math.floor(d[0] / 10),0) + draw(d[0] % 10,1) + draw(Math.floor(d[1] / 10),3) + draw(d[1] % 10,4) + draw(Math.floor(d[2] / 10),6) + draw(d[2] % 10,7) + "</div>";
}

function tick(){
  var d=new Date,D=[d.getHours(),d.getMinutes(),d.getSeconds()],t=t2h(D);
//  document.title=t2d(D).join(':');
  document.getElementById('clock').innerHTML = kittens(D);
  document.querySelector('html').style.cssText='background:rgb('+t.join(',')+');'+['-webkit-','-moz-','-o-','',''].join('transition:all 1s;');
  document.querySelector('link').setAttribute('href',fav(t[0],t[1],t[2]));
}
window.onload=function(){
  tick();setTimeout(function(){setInterval(tick,1e3)},1e3-new Date().getMilliseconds());
}
</script>
<link rel="shortcut icon" type="image/x-icon">
<div id="clock"></div>