.vector CSS class

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.


.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);

}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></div>
      <div class="vector"></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);

}

Look and feel

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


.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);

}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="vector one"></div>
      <div class="vector two"></div>
      <div class="vector three"></div>
      <div class="vector four"></div>
      <div class="vector 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);

}

Adjust Vector size

Each .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.


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

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="vector"></div>
      <div class="vector shrink-90"></div>
      <div class="vector shrink-80"></div>
      <div class="vector shrink-70"></div>
      <div class="vector shrink-60"></div>
      <div class="vector shrink-50"></div>
      <div class="vector shrink-40"></div>
      <div class="vector shrink-30"></div>
      <div class="vector shrink-20"></div>
      <div class="vector shrink-10"></div>
    </div>
  </div>
</div>

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

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.


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

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="vector"></div>
      <div class="vector grow-0.2x"></div>
      <div class="vector grow-0.4x"></div>
      <div class="vector grow-0.6x"></div>
      <div class="vector grow-1.2X"></div>
      <div class="vector grow-2x"></div>
      <div class="vector grow-3x"></div>
      <div class="vector grow-4x"></div>
      <div class="vector grow-5x"></div>
    </div>
  </div>
</div>

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

Adjusting radial layout

Arbitrary vector angle.

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


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

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="vector angle-315"></div>
    </div>
  </div>
</div>

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

Relative vector orbital position

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.


.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);
}

HTML
CSS

  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="vector grow-1x outer-orbit "></div>
        <div class="vector grow-1x quarter-outer-orbit"></div>
        <div class="vector grow-1x quarter-inner-orbit"></div>
        <div class="vector grow-1x 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);
}