Skip to content
Orbit CSS Radial Framework

.side CSS class

Sides render a side that if used with other sides generates a regular polygon figure. By default, up to 60 sides can be placed in an orbit.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> 

.satellite {
background-color: var(--o-indigo);
border: none;
}
.one {
background-color: var(--o-orange);
border: none;
}
.two {
background: radial-gradient(circle, rgba(246,246,246,1) 4%, rgba(52,249,67,1) 28%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 96%);
border: none;
}
.three {
background-color: var(--o-blue-lighter);
border: 2px solid var(--o-blue);
}
.four {
background-color: transparent;
border: 2px dashed var(--o-indigo);
}
.five {
background-color: var(--o-pink);

}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
  </div>
</div>

Look and feel

Sides can be customized by adding CSS border and background properties.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="side one"></div> <div class="side two"></div> <div class="side three"></div> <div class="side four"></div> <div class="side five"></div> </div> </div> </div> 

.satellite {
background-color: var(--o-indigo);
border: none;
}
.one {
background-color: var(--o-orange);
border: none;
}
.two {
background: radial-gradient(circle, rgba(246,246,246,1) 4%, rgba(52,249,67,1) 28%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 96%);
border: none;
}
.three {
background-color: var(--o-blue-lighter);
border: 2px solid var(--o-blue);
}
.four {
background-color: transparent;
border: 2px dashed var(--o-indigo);
}
.five {
background-color: var(--o-pink);

}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="side one"></div>
      <div class="side two"></div>
      <div class="side three"></div>
      <div class="side four"></div>
      <div class="side five"></div>
    </div>
  </div>
</div>

Adjusting radial layout

Arbitrary side angle.

.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="side angle-315"></div> <div class="side angle-15"></div> <div class="side angle-185"></div> </div> </div> </div> 

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .vector {
background-color: var(--o-cyan)
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="side angle-315"></div>
      <div class="side angle-15"></div>
      <div class="side angle-185"></div>
    </div>
  </div>
</div>

Relative side orbital position

By default, .side is positioned in the middle of orbit path. To change that, there some CSS utilities:

.inner-orbit: To place an.side just below its orbit.

.outer-orbit: To place .side just above its orbit.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="side outer-orbit "></div> <div class="side outer-orbit"></div> <div class="side outer-orbit"></div> <div class="side outer-orbit"></div> </div> <div class="orbit-5"> <div class="side inner-orbit "></div> <div class="side inner-orbit"></div> <div class="side inner-orbit"></div> <div class="side inner-orbit"></div> </div> </div> </div> 

.wrapper {
border: 1px dotted var(--o-purple);
height: 250px;
width: 250px;
float: left;
overflow: hidden;
margin: 5px;
}


.satellite {
border: none;
background-color: var(--o-pink)
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="side outer-orbit "></div>
        <div class="side outer-orbit"></div>
        <div class="side outer-orbit"></div>
        <div class="side outer-orbit"></div>
      </div>
      <div class="orbit-5">
        <div class="side inner-orbit "></div>
        <div class="side inner-orbit"></div>
        <div class="side inner-orbit"></div>
        <div class="side inner-orbit"></div>
      </div>




    </div>
  </div>