bpierre/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clock demo</title>
  <style>
    svg {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -12px 0 0 -12px;
    }
  </style>
</head>
<body>
  <svg width="24" height="24" viewBox="-12.5 -12 24 24">
    <circle cx="0" cy="0" r="10" stroke="#b7b2ac" fill="white" stroke-width="3"  />
    <rect x="-1"  y="-7" width="2" height="2" fill="#b7b2ac" />
    <rect x="-1"  y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(90)" />
    <rect x="-1"  y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(180)" />
    <rect x="-1"  y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(270)" />
    <line id="hours"   stroke="#b7b2ac" stroke-width="2" stroke-linecap="round" x1="0" x2="0" y1="0" y2="-5" />
    <line id="minutes" stroke="#b7b2ac" stroke-width="2" stroke-linecap="round" x1="0" x2="0" y1="0" y2="-7" />
  </svg>
  <script>
  var hoursElt = document.getElementById('hours'),
      minutesElt = document.getElementById('minutes'),

      // Time accelerator!
      fastTimeStamp = (function(speed){
        var fake = Date.now(),
            real = fake,
            now;
        return function(){
          now = Date.now();
          fake += (now - real) * speed;
          real = now;
          return fake;
        };
      })(5000),

      // Ha ha
      raf = this.requestAnimationFrame ||
            this.webkitRequestAnimationFrame ||
            this.mozRequestAnimationFrame ||
            this.oRequestAnimationFrame ||
            this.msRequestAnimationFrame;

  function angle(elt, val) {
    elt.setAttributeNS(null, 'transform', 'rotate('+ 6 * val +')');
  }

  (function update(){
    var now = new Date(fastTimeStamp()),
        minutes = now.getMinutes(),
        hours = ((now.getHours() % 12) + minutes/60) * 5;

    angle(minutesElt, minutes);
    angle(hoursElt, hours);

    raf(update);
  })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Clock demo</title>
	<style>
	svg {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -12px 0 0 -12px;
	}
	</style>
	</head>
	<body>
	<svg width="24" height="24" viewBox="-12.5 -12 24 24">
	<circle cx="0" cy="0" r="10" stroke="#b7b2ac" fill="white" stroke-width="3" />
	<rect x="-1" y="-7" width="2" height="2" fill="#b7b2ac" />
	<rect x="-1" y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(90)" />
	<rect x="-1" y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(180)" />
	<rect x="-1" y="-7" width="2" height="2" fill="#b7b2ac" transform="rotate(270)" />
	<line id="hours" stroke="#b7b2ac" stroke-width="2" stroke-linecap="round" x1="0" x2="0" y1="0" y2="-5" />
	<line id="minutes" stroke="#b7b2ac" stroke-width="2" stroke-linecap="round" x1="0" x2="0" y1="0" y2="-7" />
	</svg>
	<script>
	var hoursElt = document.getElementById('hours'),
	minutesElt = document.getElementById('minutes'),

	// Time accelerator!
	fastTimeStamp = (function(speed){
	var fake = Date.now(),
	real = fake,
	now;
	return function(){
	now = Date.now();
	fake += (now - real) * speed;
	real = now;
	return fake;
	};
	})(5000),

	// Ha ha
	raf = this.requestAnimationFrame \|\|
	this.webkitRequestAnimationFrame \|\|
	this.mozRequestAnimationFrame \|\|
	this.oRequestAnimationFrame \|\|
	this.msRequestAnimationFrame;

	function angle(elt, val) {
	elt.setAttributeNS(null, 'transform', 'rotate('+ 6 * val +')');
	}

	(function update(){
	var now = new Date(fastTimeStamp()),
	minutes = now.getMinutes(),
	hours = ((now.getHours() % 12) + minutes/60) * 5;

	angle(minutesElt, minutes);
	angle(hoursElt, hours);

	raf(update);
	})();
	</script>
	</body>
	</html>