This visualization was originally made on Observable and is embedded into the React application that runs my website. The coolest part is the ability to control state, in this case the size of the clock. Check out 🤔 How to: Embed a Notebook in a React App to learn more about the process and shout-out to Observable on creating an awesome tool.

The High School Clock design is based on a photo I found after Googling high school clock. I was intrigued by the clock hands and their various shapes. The hour hand is basic, the minute hand is tapered, and the second hand is mostly skinny, except for a trapeziod-like balancing feature. The implementation of these hands uses SVG Polygon elements. Each hand requires its own function that outputs a set of points based on the radius of the clock.

function hourHand() {
  var w = radius / 30
  var b = radius / 7.5
  var t = radius / 2.1
  return `${-w},${b} ${w},${b} ${w},${-t} ${-w},${-t} ${-w},${b}`
}

Check out the source code at Observable.