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 = "gravity-spot" >
< 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 >
background-color : var ( --o-indigo );
background-color : var ( --o-orange );
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 % );
background-color : var ( --o-blue-lighter );
border : 2 px solid var ( --o-blue );
background-color : transparent ;
border : 2 px dashed var ( --o-indigo );
background-color : var ( --o-pink );
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 = "gravity-spot" >
< 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 >
background-color : var ( --o-indigo );
background-color : var ( --o-orange );
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 % );
background-color : var ( --o-blue-lighter );
border : 2 px solid var ( --o-blue );
background-color : transparent ;
border : 2 px dashed var ( --o-indigo );
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.
<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 = "gravity-spot" >
< 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 >
border : 1 px dashed var ( --o-cyan );
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.
<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 = "gravity-spot" >
< 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 >
border : 1 px dashed var ( --o-cyan );
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.
<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 = "gravity-spot" >
< div class = "vector angle-315" ></ div >
border : 1 px dashed var ( --o-cyan );
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.
<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);
}