Clock

SVG+KnockoutJS

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle id="clock" cx="100" cy="100" r="100"/>
    <line id="hour"  data-bind="attr:{transform: hour}" x1="100" y1="100" x2="100" y2="50"/>
    <line id="minute" data-bind="attr:{transform: minute}" x1="100" y1="100" x2="100" y2="30"/>
    <line id="second" data-bind="attr:{transform: second}" x1="100" y1="120" x2="100" y2="20"/>
</svg>

CSS

#clock {fill:seashell; stroke:black; stroke-width:1;}
line {stroke:black;}    
#hour {stroke-width:3;}
#minute {stroke-width:2;}
#second {stroke:red;stroke-width:1;}