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>

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>

https://d3js.org/d3.v4.min.js