Skip to content

Instantly share code, notes, and snippets.

@bpierre

bpierre/index.html

Created Sep 26, 2012
Embed
What would you like to do?
Mini clock
<!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>
@bpierre

This comment has been minimized.

Copy link
Owner Author

@bpierre bpierre commented Sep 27, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment