Skip to content

Instantly share code, notes, and snippets.

@yesoreyeram

yesoreyeram/README.md

Created October 28, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yesoreyeram/24a32642512a078c22ef to your computer and use it in GitHub Desktop.
Save yesoreyeram/24a32642512a078c22ef to your computer and use it in GitHub Desktop.
Download ZIP
SVG Clock
Raw
README.md

Clock using SVG and d3

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script>var chart = d3.select("body").append("svg:svg")
.attr("class", "chart")
.attr("width", 600)
.attr("height", 600).append("svg:g")
.attr("transform", "translate(200,200)");
chart.append("svg:path").attr("fill","black").attr("d", d3.svg.arc().innerRadius(160).outerRadius(162).startAngle(0).endAngle(Math.PI*2));
var hourRing = chart.append("svg:path").attr("fill","red");
var minuteRing = chart.append("svg:path").attr("fill","yellow");
var secondRing = chart.append("svg:path").attr("fill","green");
var millisecondRing = chart.append("svg:path").attr("fill","black");
window.setInterval(function(){
var a = new Date();
hourRing.attr("d", d3.svg.arc().innerRadius(140).outerRadius(160).startAngle(0).endAngle(Math.PI*2/12*(a.getHours()%12)));
minuteRing.attr("d", d3.svg.arc().innerRadius(120).outerRadius(140).startAngle(0).endAngle(Math.PI*2/60*(a.getMinutes())));
secondRing.attr("d", d3.svg.arc().innerRadius(100).outerRadius(120).startAngle(0).endAngle(Math.PI*2/60*(a.getSeconds())));
millisecondRing.attr("d", d3.svg.arc().innerRadius(98).outerRadius(100).startAngle(0).endAngle(Math.PI*2/1000*(a.getMilliseconds())));
},10)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment