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.
Vectors can be customized by adding CSS border and background properties.
Adjust Vector sizeEach .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.
Note
shrink-* and .grow-*x can’t be used at same time.
Note
Remember that .orbit properties affect .vector radial layout.
.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4