Vectors

A .vector is a ray pointing out from the center, laid across its ring. A ring of vectors is a scale; a long one is a needle.

60 and 12 ticks share orbit-11. The three hands are vectors on orbit-3, orbit-4 and orbit-5, each turned with rotate.

Length and look

A vector is one lane long and 1px thick, in the text color. Its look is plain CSS: height for the thickness, background for the color, border-radius for round ends. For the length, set --o-size-ratio in lanes on the vector, its ring or the .gravity-spot, or use the classes:

.shrink-5 to .shrink-100: shorter than a lane. shrink-30 is 0.7 lanes.
.grow-1x to .grow-12x: 2 to 24 lanes, with decimals like grow-1.5x (3 lanes). .grow-0.1x to .grow-0.9x add tenths of a lane.

Like every element on a ring, a vector is centered on its lane and reaches half its length to each side. So a vector 2N lanes long on orbit-N starts at the center: that is the minute hand above, 8 lanes on orbit-4.

Clockwise from the top: half a lane, one, 1.5, 2, 3 and 4 lanes, then two styled with CSS.

Position and angle

.inner-orbit moves a vector in so it ends on its lane, and .outer-orbit moves it out so it starts there; .quarter-inner-orbit and .quarter-outer-orbit go part of the way, and --o-alignment takes any length. .angle-0 to .angle-360 point a vector at an exact angle, clockwise from the top. The ring's range, start and direction work as for satellites; see Orbits.

On orbit-8: outer-orbit at 0°, default at 90°, inner-orbit at 180°. On orbit-11: seven ticks over 90° from 225°.

Reference

Class or property	Default	What it does
`--o-size-ratio`	`1`	Length, in lanes.
`height`, `background`	`1px`, `currentcolor`	Thickness and color.
`.shrink-5` … `.shrink-100`		Shorter: `shrink-N` is 1 − N/100 lanes.
`.grow-1x` … `.grow-12x`, `.grow-0.1x` …		Longer: `grow-Nx` is 2N lanes.
`.inner-orbit`, `.outer-orbit`, `.quarter-inner-orbit`, `.quarter-outer-orbit`		Moves it in or out from its lane.
`--o-alignment`	`1px`	Any offset from the lane; positive is inward.
`.angle-0` … `.angle-360`		An exact angle, clockwise from the top.