Orbits

Gravity draws orbits. A ring, .orbit-N, is a lane around the gravity spot, N twelfths of the way out to the edge, and it is where satellites, vectors, sides, arcs and progress travel.

Which lane

• The diameter of orbit-N is N/12 of the reach (--o-force): orbit-3 is a quarter, orbit-6 half, orbit-12 all of it.
• orbit-0 is the center itself. It holds centered content; see The center.
• orbit-13 to orbit-24 lie past the edge, for things that should stick out. With the runtime, higher numbers work too.
• .orbit without a number takes the next lane in order: the first .orbit of a system is lane 1, the second lane 2. Numbered rings are not counted.

Rings are direct children of a .gravity-spot, never of another ring. A ring holds only .satellite, .vector, .side, <o-arc> and <o-progress>. With dev-orbit on the .bigbang, the console points out anything else.

Look

Rings are invisible. Give them a border or a background to draw them.

Thickness

Everything on a ring is one lane thick: a twelfth of the radius. Set --o-size-ratio, in lanes, on the ring to change all its elements, on the .gravity-spot for the whole system, or on one element. An element on orbit-N reaches half its thickness past lane N, so a band two lanes thick on orbit-11 ends exactly at the edge.

Spacing

.shrink-5 to .shrink-100, in steps of 5, move a ring toward the previous lane: orbit-10 shrink-40 sits 40% of a lane inside lane 10. On a ring, shrink-N only changes where it sits; the elements on it keep their size.

Angles

A ring spreads its elements evenly. Five satellites on a full ring sit 72° apart, starting at the top and going clockwise. Each kind is spread on its own, so five satellites and twelve vectors can share a ring.

• --o-range is how much of the circle the ring uses (360deg by default). .range-0 to .range-360 set it in whole degrees.
• --o-from is where the range starts, clockwise from the top. .from-0 to .from-360 set it.
• .fit-range puts the first and last element on the two ends of a partial range, instead of leaving one step free at the end.
• .ccw goes counterclockwise.

All of them cascade, so you can set them on the .gravity-spot for every ring at once. To place one element at an exact angle, use .angle-N on it; see Satellites.

The center

orbit-0 is the center of the system. Put a .satellite.at-center in it for centered content, and size it with --o-size-ratio on orbit-0: the value is its diameter in lanes, so 12 reaches orbit-6 and 24 fills the universe.

Ellipses

--o-ellipse-x and --o-ellipse-y stretch a ring into an ellipse. Values below 1 stretch it along that axis: --o-ellipse-x: .5 makes it twice as wide. Satellites and vectors follow the ellipse; arcs, progress and sides are drawn for circles, so leave them on round rings.

Gooey effect

.gooey-fx (or .gooey-fx-light), .gooey-fx-medium and .gooey-fx-max blend touching elements of a ring into one blob with an SVG filter. Safari does not support it.

Stacking

Rings stack in document order: a later ring paints over an earlier one. To stack them in 3D, with perspective and animated depth changes, see Depth layers.

Reference