180° gauge
A rating on a half circle: five named zones, a needle, and the zone you are in lit up.
How it's built
- The universe is 2:1 with
.at-bottom, so the center sits on its bottom edge.--o-force: 100cqwmakes the reach the width instead of the shorter side. - Zones and names live on two rings that share
range-180 from-270. Five<o-arc>withoutvaluesplit the half circle evenly, so each name lands in the middle of its zone with no math. - The names are text arcs with a transparent fill:
--o-colorcolors the letters, andfont-sizeis the same px size on any ring. - The needle is one
.vectoreight lanes long. Its ring turns withrotate, from-90degfor 0 to90degfor 100. - The universe is a
role="meter". The script keepsaria-valuenow, and anaria-valuetextwith the zone name, in step with the drawing.
For "lower is better" metrics like latency, list the zones the other way round, teal first.
Related
- 240° gauge: a speedometer with numbers
- Fuel gauge: a quarter circle for tight spaces
- Half gauge demo: the same universe, in cells
- Orbit Kit gauge: a ready-made component