Arcs

<o-arc> draws a piece of a lane, with text along it if you want. Sibling arcs split their ring between them, or stack one after another by value.

A label that fits its text, eight equal segments (hover them), and a donut of 45, 30 and 25.

Arcs go straight into a ring, next to satellites or vectors if you like. They are drawn by the runtime, so they need the Orbit script.

Reference

Attribute	Default	What it does
`value`		Share of the ring's range, out of `max`. Without it, arcs split the range equally. See Split or stack.
`max`	`100`	The value that fills the whole range.
`range`		`auto` makes the arc as long as its text. See Arcs that fit their text.
`shape`	`none`	The ending. See Endings.
`text-anchor`	`middle`	Text along the arc: `start`, `middle` or `end`. On a `range="auto"` arc, where the arc sits around its angle.
`flip`		Runs the text the other way, so it reads upright at the bottom. Also works as a class.
`fit-range`		Stretches or squeezes the text to the whole arc. Also works as a class.
`interactive`		Makes the whole band clickable, even where it is transparent. See Pointer interaction.
`hit-width`	`0`	Extra touch area, in px, on each side of an `interactive` band.

Property or class	Default	What it does
`--o-fill`	`var(--o-gray-light)`	Band color. `transparent` for text only.
`--o-stroke`	`var(--o-fill)`	Outline color.
`--o-stroke-width`	`1`	Outline width, in px.
`color` or `--o-color`	`currentcolor`	Text color. Other font properties apply too.
`--o-gap`, `.gap-0` … `.gap-30`	`1`	Space at each end of the arc. Cascades from the ring and the system.
`--o-size-ratio`	`1`	Thickness, in lanes. `.grow-` and `.shrink-` work as on satellites.
`.inner-orbit`, `.outer-orbit`, `.quarter-*-orbit`		Moves the band in or out from its lane.
`.angle-0` … `.angle-360`		Starts the arc at that angle.

Split or stack

Without value, sibling arcs share the ring equally: a segmented ring, or a pie when they are thick. With value, each takes its share of the range and starts where the previous one ended: a donut chart. Values are not normalized, so make them add up to max for a full ring. With max="24", value="6" is a quarter. An explicit value="0" draws nothing and takes no room.

Five arcs with values 50, 25, 15, 5 and 5, and three satellites at the middle angle of the big ones.

Color

--o-fill colors the band, and --o-stroke and --o-stroke-width its outline. They change with a short transition, so a hover state is one rule. Hover needs interactive: arcs ignore the pointer until you ask.

Hover the segments.

Endings

shape sets how each end looks: circle (or circle-a), circle-b, bullet, arrow, slash, backslash, rounded and zigzag. Endings are sized from the band, so they look the same on every ring and at every size.

Thickness, position and gaps

An arc is one lane thick. Set --o-size-ratio in lanes on the arc, its ring or the .gravity-spot, or use the .grow-* and .shrink-* classes on the arc. .inner-orbit and .outer-orbit move the band in or out so one of its edges sits on the lane, and the .quarter- versions go part of the way.

--o-gap is the space left at each end of an arc. It cascades, so one value on the ring spaces all its arcs; .gap-0 to .gap-30 set it on one arc. A ring of 3 to 6 thick segments usually wants --o-gap between 24 and 60 to read as separate pieces.

Outer ring, clockwise from the top: outer-orbit, quarter-outer-orbit, default, quarter-inner-orbit, inner-orbit. Inner ring: --o-gap.

Arcs follow the ring's --o-range, --o-from and .ccw (see Orbits). .angle-N on an arc starts it at that angle instead of its turn on the ring.

Curved text

Text inside an <o-arc> is drawn along it. Style it like any text: color, font-size, font-weight, text-transform. The font size is the same in px on every ring. Set --o-fill: transparent for text with no band.

text-anchor places the text at the start, middle (default) or end of its arc.

Text runs clockwise, so on the lower half of a ring it reads upside down. flip runs it the other way:

April to September, in amber, have flip.

Text longer than its arc is cut off, and the console says so with an [orbit] message. Shorten it, widen the range, let the arc fit the text with range="auto", or add fit-range to squeeze or stretch the text to the arc:

Change the range: the text stretches or squeezes to fill it.

Arcs that fit their text

With range="auto" an arc is as long as its text, with half a letter of room at each end. Consecutive auto arcs follow each other, which makes curved menus easy:

Three auto arcs, one after another. Click one, or tab to it and press Enter.

An auto arc starts at its angle. text-anchor="middle" centers it there instead, and text-anchor="end" ends it there. Both labels here are anchored at the top:

The amber line points at 0°.

Pointer interaction

Arcs are decorative by default, so they never steal clicks from controls nearby. interactive makes the whole band clickable, even where its fill is transparent, and hit-width adds touch area in px on each side, which helps with thin arcs on touch screens.

Only the outline is drawn, yet a click anywhere on the band, or up to 12px around it, toggles the color.

When an arc acts as a control, you bring the keyboard behavior and the accessible name. Arcs are placed with the rotate property, so your own transform or scale (on hover, say) adds to it instead of replacing it.

After drawing

Each <o-arc> fires a bubbling o-rendered event after it redraws. To wait for every arc on the page, for example before measuring, use await Orbit.ready(). See Runtime and resizing.