Tiimo's focus screen is one big ring: a pale band, a coloured disc in the middle with the task's emoji, and a thick arc that grows clockwise as the timer runs, with a small arrow riding on its tip. It looks like a progress indicator, but it is really a few lines of SVG. Here is how the version in my open-source Tiimo clone works.

Live demo: https://migrant620.github.io/tiimo/ (open a task and start the timer)

Source (MIT): https://github.com/migrant620/tiimo-clone

Three layers, one <Svg>

< Svg width = { CANVAS } height = { CANVAS } viewBox = { `0 0 ${ CANVAS } ${ CANVAS } ` } > { /* 1. the pale band */ } < Circle cx = { c } cy = { c } r = { ( outer + disc ) / 2 } fill = "none" stroke = { colors . aura } strokeWidth = { outer - disc } /> { /* 2. the progress arc */ } < Path d = { arcPath ( angle ) } stroke = { colors . primary } strokeWidth = { arcWidth } strokeLinecap = "round" fill = "none" /> { /* 3.…