<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
background-color: #eee;
font-family: tahoma;
font-size: 90%;
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
}
td {
text-align: center;
}
#box {
background-color: #cc0000;
color: #fff;
font-weight: bold;
text-align: center;
padding: 3px 0 3px 0;
}
#container {
height: 100%;
vertical-align: middle;
width: 100%;
}
#clock {
fill: #cc55fa;
stroke: #000;
stroke-linecap: round;
}
#surface, #h_pointer {
stroke-width: 5px;
}
#delimiters, #s_pointer {
stroke-width: 1px;
}
#m_pointer {
stroke-width: 3px;
}
#numbers {
font-family: sans-serif;
font-size: 80%;
}
</style>
<script language="javascript" type="text/javascript">
function timerTick() {
with (new Date()) {
var h, m, s;
h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById('h_pointer').setAttribute('transform', 'rotate(' + h + ', 50, 50)');
document.getElementById('m_pointer').setAttribute('transform', 'rotate(' + m + ', 50, 50)');
document.getElementById('s_pointer').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
setTimeout(timerTick, 1000);
}
}
</script>
</head>
<body onload='timerTick()'>
<noscript><div id='box'>Please, enable JavaScript and refresh page.</div></noscript>
<table id='container'>
<tr>
<td>
<svg id='clock' viewBox='0 0 100 100' width='200' height='200'>
<circle id='surface' cx='50' cy='50' r='45'/>
<g id='pointers'>
<line id='h_pointer' x1='50' y1='50' x2='50' y2='27' />
<line id='m_pointer' x1='50' y1='50' x2='50' y2='17' />
<line id='s_pointer' x1='50' y1='50' x2='50' y2='13' />
</g>
<g id='numbers'>
<text x='43' y='18'>12</text>
<text x='85' y='54'>3</text>
<text x='47' y='91'>6</text>
<text x='9' y='54'>9</text>
</g>
</svg>
</td>
</tr>
</table>
</body>
</html>
