Skip to content

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

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

}
<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>

Look and feel

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

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

}
<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>

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.

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

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

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.

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

Adjusting radial layout

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

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.

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