.orbit CSS class

The .orbit CSS class, along with variations from .orbit-0 to .orbit-24, defines a circular path around a .gravity-spot. Within .orbit element, various Orbit elements such as satellites, o-slices, o-progress, vectors, sides, and o-texts can be positioned.

Look and feel

Orbits are initially invisible but can be customized by adding CSS border and background properties.


.orbit-9 {
background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
border: 4px solid transparent;
}

.orbit-6 {
border: 3px dotted var(--o-purple);
}

.orbit-3 {
border: 3px dashed var(--o-cyan);
background-color: var(--o-cyan-lighter)
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:300px">
    <div class="orbit-9"></div>
    <div class="orbit-6"></div>
    <div class="orbit-3"></div>

  </div>
</div>

.orbit-9 {
background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
border: 4px solid transparent;
}

.orbit-6 {
border: 3px dotted var(--o-purple);
}

.orbit-3 {
border: 3px dashed var(--o-cyan);
background-color: var(--o-cyan-lighter)
}

Number of orbits

Orbit supports 25 orbits. Orbits from 0 to 12 are placed whitin .gravity-spot force, while orbits from 13 to 24 extend beyond .gravity-spot force boundary.

.orbit-0 has not size and it is placed at center of .gravity-spot.
Orbits from 0 to 12 are placed within .gravity-spot force, that is 500px by default but can be easily changed using --o-force custom CSS var.
Orbits from 13 to 24 are situated beyond .gravity-spot force.


.orbit-0 {
  border-color: var(--o-red)
}
.orbit {
  border-color: var(--o-cyan-dark)
}
.orbit:nth-of-type(n + 14){
border-color: var(--o-cyan-dark);
border-style: dotted
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force: 200px">
    <div class="orbit-0"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
  </div>
</div>

.orbit-0 {
  border-color: var(--o-red)
}
.orbit {
  border-color: var(--o-cyan-dark)
}
.orbit:nth-of-type(n + 14){
border-color: var(--o-cyan-dark);
border-style: dotted
}

Orbit size

Each .orbit has a fraction size of .gravity-spot force. For example, .orbit-6 (or .orbit child number 6), represents 50% of .gravity-spot force. Here is the complete list:

.orbit number	fraction size
`.orbit-0`	0%
`.orbit-1` or `.orbit` child 1	~8%
`.orbit-2` or `.orbit` child 2	~16%
`.orbit-3` or `.orbit` child 3	25%
`.orbit-4` or `.orbit` child 4	~33%
`.orbit-5` or `.orbit` child 5	~42%
`.orbit-6` or `.orbit` child 6	50%
`.orbit-7` or `.orbit` child 7	~58%
`.orbit-8` or `.orbit` child 8	~66%
`.orbit-9` or `.orbit` child 9	~75%
`.orbit-10` or `.orbit` child 10	~83%
`.orbit-11` or `.orbit` child 11	~91%
`.orbit-12` or `.orbit` child 12	100%
`.orbit-13` or `.orbit` child 13	~108%
`.orbit-14` or `.orbit` child 14	~116%
`.orbit-15` or `.orbit` child 15	125%
`.orbit-16` or `.orbit` child 16	~133%
`.orbit-17` or `.orbit` child 17	~142%
`.orbit-18` or `.orbit` child 18	150%
`.orbit-19` or `.orbit` child 19	~158%
`.orbit-20` or `.orbit` child 20	~166%
`.orbit-21` or `.orbit` child 21	~175%
`.orbit-22` or `.orbit` child 22	~183%
`.orbit-23` or `.orbit` child 23	~191%
`.orbit-24` or `.orbit` child 24	200%

Adjust orbit size

Each .orbit or .orbit-* can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the orbit to shrink by a specified percentage.


.orbit-10 {
border-color: var(--o-cyan);
}
.shrink-40 {
border-color: var(--o-purple);
}
.shrink-90 {
border-color: var(--o-orange);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:300px">
    <div class="orbit-10"></div>
    <div class="orbit-10 shrink-40"></div>
    <div class="orbit-10 shrink-90"></div>
  </div>
</div>

.orbit-10 {
border-color: var(--o-cyan);
}
.shrink-40 {
border-color: var(--o-purple);
}
.shrink-90 {
border-color: var(--o-orange);
}

Orbit stacking order

Stacking order follows standard HTML rules. In the example below, the latter orbit is abowe the former one.


.orbit-10:first-child {
border-color: var(--o-red);
border-style: dashed;
border-width: 3px
}
.orbit-10 {
border-color: var(--o-cyan);
opacity: 0.5;
border-width: 3px;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:300px">
    <div class="orbit-10"></div>
    <div class="orbit-10"></div>
  </div>
</div>

.orbit-10:first-child {
border-color: var(--o-red);
border-style: dashed;
border-width: 3px
}
.orbit-10 {
border-color: var(--o-cyan);
opacity: 0.5;
border-width: 3px;
}

Elliptical orbits

Turn Orbits into ellipses: Two CSS variables (--o-ellipse-x and --o-ellipse-y) can transform .orbit or .orbit-* into an ellipse shape. This transformation affects the orbit and its children, excluding o-slice, o-progress, and o-text web components, which remain hidden when the orbit is elliptical. Values for these variables range from 0 to 1. A CSS utlity could be added in a future.

Both CSS variable can be used in the same orbit.



.orbit-10 {
border-color: var(--o-cyan);
border-width: 1px;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot " style="--o-force:100px">
    <div class="orbit-10" style="--o-ellipse-x: 0"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.1"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.2"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.3"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.4"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.5; --o-ellipse-y: 0.3"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.6"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.7"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.8"></div>
    <div class="orbit-10" style="--o-ellipse-x: 0.9"></div>
    <div class="orbit-10" style="--o-ellipse-x: 1"></div>
  </div>
</div>

.orbit-10 {
border-color: var(--o-cyan);
border-width: 1px;
}

Orbits aligment

By default, orbits are aligned at .gravity-spot center but remember there are some CSS utilities class to change aligment. You can use .at-center (default), .at-center-left, .at-center-right, .at-top, .at-top-left, .at-top-right, .at-bottom, .at-bottom-left, .at-bottom-right.



.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}