Vector
Vectors are perpendicular lines rendered across orbits. They resemble minute marks in an analog watch, but can be adapted to create connector lines, for instance. Elements with .vector are placed along an .orbit or .orbit-* path. By default, up to 60 vectors can be placed in an orbit.
Look and feel
Vectors can be customized by adding CSS border and background properties.
Adjust Vector size
Each .vector has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the vectors to shrink by a specified percentage.
On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing vector to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.
Adjusting radial layout
Arbitrary vector angle.
.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Relative vector orbital position
By default, .vector is positioned in the middle of orbit path. To change that, there some CSS utilities:
.inner-orbit: To place an.vector just below its orbit.
.outer-orbit: To place .vector just above its orbit.
.quarter-inner-orbit: To place .vector a 25% into its orbit.
.quarter-outer-orbit: To place .vector a 25% outer its orbit.