<svg id="svg"></svg>
<h1>" TEA TIME " <br /><span>Design and Animation by Leeroyd Levi for THECALLR ©</span></h1>

body{
  margin: 0;
  padding: 0;
  font-family: Myriad Pro,arial;
  letter-spacing: -2px;
  background-color: #3d9fd5;
  font-size: 0.9em;
  overflow: hidden;
}

#svg{
  position: relative;
  cursor:pointer;
  margin: 0 auto;
  width: 220px;
  height: 220px;
  display: block;
  margin-top: 30px;
}
h1{
  color: white;
  position: absolute;
  top: 250px;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  text-shadow: 0.1em 0.15em #3f91be;
  line-height: 0.8em;
}

h1 span{
  font-size: 0.4em;
  font-weight: 400;
  text-shadow: none;
}

//2014 @Leeroydl
//http://leeroyd.com
//http://thecallr.com

var paper = Snap("#svg");
var outterClock = paper.circle(100, 100, 0);
var innerClock1 = paper.circle(100, 100, 0);
var innerClock2 = paper.circle(100, 100, 0);
var smallNeedle = paper.rect(100, 100, 0.1, 0);
var bigNeedle = paper.rect(100, 90, 0.1, 0);
var axe = paper.circle(100, 100, 0);

smallNeedle.attr({
    strokeWidth: 5,
});

bigNeedle.attr({
    strokeWidth: 3,
    filter : paper.filter(Snap.filter.shadow(1, 1, 2, '#5c5c5c'))
});

setTimeout(function(){
  bigNeedle.attr({
    filter : "none"
  });
},15500);

var time = 15.585*60*6;
var timeH = time / 12 - 165;

setTimeout(function () {
    bigNeedle.animate({
        transform: "r" + time + ",100,100"
    }, 13000);
    smallNeedle.animate({
        transform: "r" + timeH + ",100,100"
    }, 13000);
    setTimeout(function () {
        bigNeedle.animate({
            stroke: "#515151",
            height: 85
        }, 1000,mina.bounce);
        smallNeedle.animate({
            stroke: "#515151",
            height: 50
        }, 1000,mina.bounce);
    }, 1000);
    cadran();
}, 2500);

innerClock1.attr({
    fill: "#fff",
});

innerClock2.attr({
    fill: "#fcfcf9",
    stroke: "#6b6b6b",
    strokeWidth: 0.1
});

outterClock.attr({
    fill: "#3b3b3b",
    stroke: "#6b6b6b",
    strokeWidth: 0.3,
    id: 'shadow',
    filter : paper.filter(Snap.filter.shadow(10, 10, 1, '#3f91be'))
});

axe.attr({
    fill: "#ffce66"
});

setTimeout(function () {
    outterClock.animate({
        r: 98
    }, 900, mina.bounce);

    setTimeout(function () {
        innerClock2.animate({
            r: 80,
        }, 200);
    }, 1000);
    setTimeout(function () {
        innerClock1.animate({
            r: 90
        }, 500, mina.bounce);
    }, 300);

    setTimeout(function () {
        axe.animate({
            r: 7
        }, 1000, mina.bounce);
    }, 1000);

}, 500);

var i = 0;

function cadran() {

    setTimeout(function () {
        if (i < 60) {

            if (i % 5 == 0) {
                var dial = paper.rect(100, 11.5, 1.5, 6.5);
            } else {
                var dial = paper.rect(100, 11.5, 0.3, 6.5);
            }
            dial.attr({
                transform: "r" + 6 * i + ",100,100",
                fill: "#ababab",
                class: "cadran"
            });
            cadran();
        }
        i++;
    }, 10);
}

setTimeout(function () {
    var t1 = paper.text(92, 38, "12");
}, 4000);

setTimeout(function () {
    var t2 = paper.text(165, 105, "3");
}, 4400);

setTimeout(function () {
    var t3 = paper.text(96, 175, "6");
}, 4800);

setTimeout(function () {
    var t4 = paper.text(25, 105, "9");
}, 5200);