Skip to content

Instantly share code, notes, and snippets.

@xdenser

xdenser/gist:7971169

Last active December 31, 2015 10:09
Show Gist options
  • Save xdenser/7971169 to your computer and use it in GitHub Desktop.
Save xdenser/7971169 to your computer and use it in GitHub Desktop.
Download ZIP
SVG clock
Raw
gistfile1.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="knockout-3.0.0.js"></script>
<script>
var vm = {
angles: [0,1,2,3,4,5,6,7,8,9,10,11].map(function(c){
return "rotate("+c*360/12+" 100 100)";
}),
anglesM:(function(){
var r = [];
for(var i=0;i<60;i++){
r.push("rotate("+i*360/60+" 100 100)");
}
return r;
})(),
hours:ko.observable(0),
minutes: ko.observable(0),
seconds: ko.observable(0)
};
vm.hoursTrans = ko.computed(function(){
return "rotate("+(vm.hours()*360/12 - 90)+" 100 100)";
});
vm.minutesTrans = ko.computed(function(){
return "rotate("+(vm.minutes()*360/60 - 90)+" 100 100)";
});
vm.secondsTrans = ko.computed(function(){
return "rotate("+(vm.seconds()*360/60 - 90)+" 100 100)";
});
function calcTime(){
var d = new Date();
vm.hours(d.getHours());
vm.minutes(d.getMinutes());
vm.seconds(d.getSeconds());
}
calcTime();
setInterval(calcTime);
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<!-- A circle of radius 200 -->
<rect id = "r1" x="70" y="-5" width="30" height="10" fill="white" stroke="black" stroke-width="0.3" />
<line id = "l1" x1="95" y1="0" x2="100" y="0" style="stroke-width: 0.3px; stroke: black;"></line>
<line id ="hours" x1="0" y1="0" x2="30" y2="0" style="stroke-width: 3px; stroke: black;"></line>
<line id ="minutes" x1="0" y1="0" x2="50" y2="0" style="stroke-width: 2px; stroke: black;"></line>
<line id ="seconds" x1="0" y1="0" x2="90" y2="0" style="stroke-width: 0.5px; stroke: black;"></line>
<!-- An ellipse (rx=200,ry=150) -->
<ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
<g>
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"></circle>
</g>
</defs>
<g data-bind='foreach: anglesM'>
<use x = "100" y = "100" xlink:href = "#l1" data-bind="attr:{ transform: $data }" />
</g>
<g data-bind='foreach: angles'>
<use x = "100" y = "100" xlink:href = "#r1" data-bind="attr:{ transform: $data }" />
</g>
<g>
<use x = "100" y = "100" xlink:href = "#hours" data-bind="attr:{ transform: hoursTrans }" />
<use x = "100" y = "100" xlink:href = "#minutes" data-bind="attr:{ transform: minutesTrans }" />
<use x = "100" y = "100" xlink:href = "#seconds" data-bind="attr:{ transform: secondsTrans }" />
</g>
</svg>
<span data-bind='text: seconds'></span>
<script>
ko.applyBindings(vm);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment