.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-arcs, 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-arc, 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;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot at-center-left" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-center-right" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-bottom" style="--o-force:300px">
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
  </div>
    <div class="gravity-spot at-top" style="--o-force:300px">
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
  </div>
</div>

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

Nesting orbits

This example shows how to nest orbits to created complex radial designs.


.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <div class="satellite">
        <div class="gravity-spot">
          <div class="orbit"></div>
          <div class="orbit"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

Distribution of orbit children elements

By default, these Orbit elements are evenly distributed along the perimeter of .orbit. For instance, if there are five satellites, they will be spaced 72 degrees apart, covering the full 360-degree range of .orbit. The zero degree of Orbit is positioned similar to the 12 o’clock mark on an analog clock.


.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">

    <div class="orbit-12">
      <div class="satellite">0º</div>
      <div class="satellite">72º</div>
      <div class="satellite">144º</div>
      <div class="satellite">216º</div>
      <div class="satellite">288º</div>
    </div>
    <div class="orbit-10">
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

Adjusting radial layout

Range.

.range-*: Set arbitrary orbit range from 0 to 360 length. If custom range is defined, .fit-range could be added to justify children distribution.


.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">
    <div class="orbit-10 range-180 ">
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}


.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">
    <div class="orbit-10 range-180 fit-range ">
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

Starting angle.

.from-*: Set starting point angle from 0 to 360 degrees.


.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">
    <div class="orbit-10 range-180 from-90 fit-range">
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
      <div class="satellite grow-0.8x"></div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

Invert direction

.ccw: Invert orbit child arragement to counter clock wise direction.


.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">
    <div class="orbit-10 range-180 fit-range ccw ">
      <div class="satellite grow-0.8x">1</div>
      <div class="satellite grow-0.8x">2</div>
      <div class="satellite grow-0.8x">3</div>
      <div class="satellite grow-0.8x">4</div>
      <div class="satellite grow-0.8x">5</div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 1px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

Add gooey effect.

.gooey-fx-*: This CSS utility enhances the appearance of grouped and sticky child elements within the orbit. Possible values are .gooey-fx, .gooey-fx-medium, and .gooey-fx-max


.satellite {
border: none;
}
.orbit-10 {
border: 4px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot" style="--o-force:220px">
    <div class="orbit-10 range-90 gooey-fx ">
      <div class="satellite grow-3x"></div>
      <div class="satellite grow-3x"></div>
      <div class="satellite grow-3x"></div>
    </div>
  </div>
</div>

.satellite {
border: none;
}
.orbit-10 {
border: 4px dashed var(--o-cyan);
}
.orbit-10 > .satellite {
background-color: var(--o-cyan)
}
.orbit-12 {
font-size: 10px
}