<!DOCTYPE html>
<html>
<head>
<title>Clock--svg</title>
<style type="text/css">
/*#shadow{
stroke:#000;
}*/
#clock{
stroke-linecap:round;
stroke:black;
fill:#eef;
}
#face{
stroke-width:3px;
}
#ticks{
stroke-width:2;
}
#numbers{
font-family: sans-serif;
font-size: 7pt;
font-weight: bold;
text-anchor:middle;
stroke:none;
fill:black;
}
/*#hands{
stroke:#000;
}*/
#hourhand{
stroke-width:5px;
}
#minutehand{
stroke-width:3px;
}
</style>
<script type="text/javascript">
function updateTime(){
var now = new Date();
var min = now.getMinutes();
var hour = ( now.getHours() % 12 )+ min/60;
var minangle = min * 6;
var hourangle = hour * 30;
var minhand = document.getElementById("minhand");
var hourhand = document.getElementById("hourhand");
minhand.setAttribute("transform","rotate("+ minangle+ ",50,50)");
hourhand.setAttribute("transform","rotate("+ hourangle+",50,50)");
setTimeout(updateTime,60000);
}
</script>
</head>
<body>
<div>
<svg width="500" height="500" viewBox="0 0 100 100" id="clock">
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feOffset in="blur" dx="1" dy="1" result="shadow" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="shadow" />
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/>
<g id="ticks">
<line x1="50" y1="5.000" x2="50.00" y2="10.00"/><!-- 12 -->
<line x1="72.5" y1="11.03" x2="70.00" y2="15.36"/><!-- 1 -->
<line x1="88.97" y1="27.5" x2="85.00" y2="30.36"/><!-- 2 -->
<line x1="95" y1="50" x2="90.00" y2="50"/><!-- 3 -->
<line x1="88.97" y1="72.5" x2="85.00" y2="70.36"/><!-- 4 -->
<line x1="72.5" y1="88.97" x2="70.00" y2="85"/><!-- 5 -->
<line x1="50" y1="95.000" x2="50.00" y2="90.00"/><!-- 6 -->
<line x1="27.50" y1="88.97" x2="30.00" y2="85"/><!-- 7 -->
<line x1="11.03" y1="72.5" x2="14.50" y2="70"/><!-- 8 -->
<line x1="5" y1="50" x2="10" y2="50"/><!-- 9 -->
<line x1="11.03" y1="27.5" x2="14.00" y2="29.36"/><!-- 10 -->
<line x1="27.5" y1="11.03" x2="29" y2="14"/><!-- 11 -->
</g>
<g id="numbers">
<text x="50" y="18">12</text>
<text x="85" y="53">3</text>
<text x="50" y="88">6</text>
<text x="15" y="53">9</text>
</g>
<g id="hands" filter="url(#shadow)">
<line id="hourhand" x1="50" y1="50" x2="50" y2="24" />
<line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
</g>
</svg>
</div>
</body>
</html>
<html>
<head>
<title>Clock--svg</title>
<style type="text/css">
/*#shadow{
stroke:#000;
}*/
#clock{
stroke-linecap:round;
stroke:black;
fill:#eef;
}
#face{
stroke-width:3px;
}
#ticks{
stroke-width:2;
}
#numbers{
font-family: sans-serif;
font-size: 7pt;
font-weight: bold;
text-anchor:middle;
stroke:none;
fill:black;
}
/*#hands{
stroke:#000;
}*/
#hourhand{
stroke-width:5px;
}
#minutehand{
stroke-width:3px;
}
</style>
<script type="text/javascript">
function updateTime(){
var now = new Date();
var min = now.getMinutes();
var hour = ( now.getHours() % 12 )+ min/60;
var minangle = min * 6;
var hourangle = hour * 30;
var minhand = document.getElementById("minhand");
var hourhand = document.getElementById("hourhand");
minhand.setAttribute("transform","rotate("+ minangle+ ",50,50)");
hourhand.setAttribute("transform","rotate("+ hourangle+",50,50)");
setTimeout(updateTime,60000);
}
</script>
</head>
<body>
<div>
<svg width="500" height="500" viewBox="0 0 100 100" id="clock">
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feOffset in="blur" dx="1" dy="1" result="shadow" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="shadow" />
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/>
<g id="ticks">
<line x1="50" y1="5.000" x2="50.00" y2="10.00"/><!-- 12 -->
<line x1="72.5" y1="11.03" x2="70.00" y2="15.36"/><!-- 1 -->
<line x1="88.97" y1="27.5" x2="85.00" y2="30.36"/><!-- 2 -->
<line x1="95" y1="50" x2="90.00" y2="50"/><!-- 3 -->
<line x1="88.97" y1="72.5" x2="85.00" y2="70.36"/><!-- 4 -->
<line x1="72.5" y1="88.97" x2="70.00" y2="85"/><!-- 5 -->
<line x1="50" y1="95.000" x2="50.00" y2="90.00"/><!-- 6 -->
<line x1="27.50" y1="88.97" x2="30.00" y2="85"/><!-- 7 -->
<line x1="11.03" y1="72.5" x2="14.50" y2="70"/><!-- 8 -->
<line x1="5" y1="50" x2="10" y2="50"/><!-- 9 -->
<line x1="11.03" y1="27.5" x2="14.00" y2="29.36"/><!-- 10 -->
<line x1="27.5" y1="11.03" x2="29" y2="14"/><!-- 11 -->
</g>
<g id="numbers">
<text x="50" y="18">12</text>
<text x="85" y="53">3</text>
<text x="50" y="88">6</text>
<text x="15" y="53">9</text>
</g>
<g id="hands" filter="url(#shadow)">
<line id="hourhand" x1="50" y1="50" x2="50" y2="24" />
<line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
</g>
</svg>
</div>
</body>
</html>
