Skip to content

Instantly share code, notes, and snippets.

@bricof
Last active May 10, 2017 13:30
Show Gist options
  • Save bricof/15adf370e715dd585585417af798a19c to your computer and use it in GitHub Desktop.
Save bricof/15adf370e715dd585585417af798a19c to your computer and use it in GitHub Desktop.
Stopwatch

This animated stopwatch is used in a couple of places in the Stitch Fix Algorithms Tour to inform the reader that a timing-based animation is proceeding. The svg drawing was made by Liz Cruz.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.stopwatch {
fill: none;
stroke: #231F20;
stroke-width: 0.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.stopwatch-center {
fill: #d0d2d3;
}
</style>
<body>
<svg width="960" height="500">
<g transform="translate(400,150) scale(4)">
<circle class="stopwatch" cx="23.8" cy="24.1" r="10.1"/>
<path class="stopwatch" d="M28.2,15l0.6-1.4c0.9,0.3,1.7,0.8,2.4,1.4l-1,1.3"/>
<rect class="stopwatch" x="20.4" y="10.1" width="6.7" height="2.3"/>
<line class="stopwatch" x1="22.8" y1="14" x2="22.8" y2="12.4"/>
<line class="stopwatch" x1="24.8" y1="12.4" x2="24.8" y2="14"/>
<path class="stopwatch stopwatch-center" d=""/>
</g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var duration = 2500,
repeat = 3
function draw_stopwatch_arc(angle){
var r = 7.4
var cx = 23.8
var cy = 24.1
var px = r * Math.sin(angle)
var py = -1 * r * Math.cos(angle)
var d = "M" + cx + "," + cy + " "
d += "l" + px + "," + py + " "
if (angle < Math.PI) {
d += "A " + r + " " + r + " 0 0 0 " + (cx) + " " + (cy - r) + " "
} else {
d += "A " + r + " " + r + " 0 0 0 " + (cx) + " " + (cy + r) + " "
d += "A " + r + " " + r + " 0 0 0 " + (cx) + " " + (cy - r) + " "
}
d3.select(".stopwatch-center")
.transition().duration(0)
.attr("d", d)
}
var stopwatch_timer = false
function stopwatch_single_turn(duration){
if (stopwatch_timer) { stopwatch_timer.stop() }
stopwatch_timer = d3.timer(function(t){
if (t > duration) { stopwatch_timer.stop() }
else { draw_stopwatch_arc(t * 2 * Math.PI / duration) }
})
}
var count = 1
stopwatch_interval = d3.interval(function(){
stopwatch_single_turn(duration)
count += 1
if (count >= repeat) { stopwatch_interval.stop() }
}, duration)
stopwatch_single_turn(duration)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment