Smartwatch face

Text written along the bezel: the digital time at the top, the date at the bottom and two complications on the sides, all <o-arc> elements that follow the live clock.

How it's built

  • Text inside an <o-arc> is drawn along it. range="auto" makes the arc as long as its text and text-anchor="middle" centers it on the from-N of its ring, so the time stays centered at the top whatever its length.
  • flip on the date turns the text so it reads left to right at the bottom of the dial.
  • The complications are <o-progress> bands on an 80° range of orbit-11, half a lane thick, with their value as curved text one lane in.
  • The script only writes text and attributes. Orbit watches the arcs and redraws them on the next frame.

Related