<o-arc>
is a standard and vanilla web-component for rendering a radial arcs or pies. By default there are up to 60 arcs elements per orbit.
Look and feel
Changing arc colors
To change o-arc color use CSS custom var --o-arc-color
and --o-hover-arc-color
in a o-arc
style.
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-5">
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
<o-arc class="cyan"></o-arc>
<o-arc class="purple"></o-arc>
</div>
</div>
</div>
o-arc.cyan {
--o-arc-color: var(--o-cyan-light);
--o-hover-arc-color: var(--o-cyan)
}
o-arc.purple {
--o-arc-color: var(--o-purple-light);
--o-hover-arc-color: var(--o-purple)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}
< div class = "gravity-spot" >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
< o-arc class = "cyan" ></ o-arc >
< o-arc class = "purple" ></ o-arc >
--o-arc-color : var ( --o-cyan-light );
--o-hover-arc-color : var ( --o-cyan )
--o-arc-color : var ( --o-purple-light );
--o-hover-arc-color : var ( --o-purple )
--o-gap : 1 ; /* This will be added as default soon*/
Changing endings
o-arc
has one special attribute: shape
to define different endings. Currently, you can choose between circle
, arrow
, slash
, backslash
and zigzag
shapes. Default none
.
<div class="wrapper">
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-3">
<o-arc class="grow-1x purple-light" shape="circle"></o-arc>
<o-arc class="grow-1x purple" shape="circle"></o-arc>
<o-arc class="grow-1x purple-dark" shape="circle"></o-arc>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-3">
<o-arc class="grow-1x purple-light" shape="arrow"></o-arc>
<o-arc class="grow-1x purple" shape="arrow"></o-arc>
<o-arc class="grow-1x purple-dark" shape="arrow"></o-arc>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-3">
<o-arc class="grow-1x purple-light" shape="zigzag"></o-arc>
<o-arc class="grow-1x purple" shape="zigzag"></o-arc>
<o-arc class="grow-1x purple-dark" shape="zigzag"></o-arc>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-3">
<o-arc class="grow-1x purple-light" shape="slash"></o-arc>
<o-arc class="grow-1x purple" shape="slash"></o-arc>
<o-arc class="grow-1x purple-dark" shape="slash"></o-arc>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-3">
<o-arc class="grow-1x purple-light" shape="backslash"></o-arc>
<o-arc class="grow-1x purple" shape="backslash"></o-arc>
<o-arc class="grow-1x purple-dark" shape="backslash"></o-arc>
</div>
</div>
</div>
</div>
.wrapper {
border: 1px dotted var(--o-purple);
height: 100px;
width: 100px;
float: left;
overflow: hidden;
margin: 5px;
}
.gravity-spot {
--o-force: 300px
}
o-arc.purple-light {
--o-arc-color: var(--o-purple-light);
--o-hover-arc-color: var(--o-orange)
}
o-arc.purple {
--o-arc-color: var(--o-purple);
--o-hover-arc-color: var(--o-orange)
}
o-arc.purple-dark {
--o-arc-color: var(--o-purple-dark);
--o-hover-arc-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}
< div class = "gravity-spot" >
< o-arc class = "grow-1x purple-light" shape = "circle" ></ o-arc >
< o-arc class = "grow-1x purple" shape = "circle" ></ o-arc >
< o-arc class = "grow-1x purple-dark" shape = "circle" ></ o-arc >
< div class = "gravity-spot" >
< o-arc class = "grow-1x purple-light" shape = "arrow" ></ o-arc >
< o-arc class = "grow-1x purple" shape = "arrow" ></ o-arc >
< o-arc class = "grow-1x purple-dark" shape = "arrow" ></ o-arc >
< div class = "gravity-spot" >
< o-arc class = "grow-1x purple-light" shape = "zigzag" ></ o-arc >
< o-arc class = "grow-1x purple" shape = "zigzag" ></ o-arc >
< o-arc class = "grow-1x purple-dark" shape = "zigzag" ></ o-arc >
< div class = "gravity-spot" >
< o-arc class = "grow-1x purple-light" shape = "slash" ></ o-arc >
< o-arc class = "grow-1x purple" shape = "slash" ></ o-arc >
< o-arc class = "grow-1x purple-dark" shape = "slash" ></ o-arc >
< div class = "gravity-spot" >
< o-arc class = "grow-1x purple-light" shape = "backslash" ></ o-arc >
< o-arc class = "grow-1x purple" shape = "backslash" ></ o-arc >
< o-arc class = "grow-1x purple-dark" shape = "backslash" ></ o-arc >
border : 1 px dotted var ( --o-purple );
--o-arc-color : var ( --o-purple-light );
--o-hover-arc-color : var ( --o-orange )
--o-arc-color : var ( --o-purple );
--o-hover-arc-color : var ( --o-orange )
--o-arc-color : var ( --o-purple-dark );
--o-hover-arc-color : var ( --o-orange )
--o-gap : 1 ; /* This will be added as default soon*/
Adjust o-arc size
Each o-arc
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">
<o-arc style="--o-arc-color: var(--o-red)"></o-arc>
<o-arc class="shrink-90" style="--o-arc-color: var(--o-orange)"></o-arc>
<o-arc class="shrink-80" style="--o-arc-color: var(--o-yellow)"></o-arc>
<o-arc class="shrink-70" style="--o-arc-color: var(--o-color)"></o-arc>
<o-arc class="shrink-60" style="--o-arc-color: var(--o-green)"></o-arc>
<o-arc class="shrink-50" style="--o-arc-color: var(--o-cyan)"></o-arc>
<o-arc class="shrink-40" style="--o-arc-color: var(--o-blue)"></o-arc>
<o-arc class="shrink-30" style="--o-arc-color: var(--o-indigo)"></o-arc>
<o-arc class="shrink-20" style="--o-arc-color: var(--o-purple)"></o-arc>
<o-arc class="shrink-10" style="--o-arc-color: var(--o-pink)"></o-arc>
</div>
</div>
</div>
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}
< div class = "gravity-spot" >
< o-arc style = "--o-arc-color: var(--o-red)" ></ o-arc >
< o-arc class = "shrink-90" style = "--o-arc-color: var(--o-orange)" ></ o-arc >
< o-arc class = "shrink-80" style = "--o-arc-color: var(--o-yellow)" ></ o-arc >
< o-arc class = "shrink-70" style = "--o-arc-color: var(--o-color)" ></ o-arc >
< o-arc class = "shrink-60" style = "--o-arc-color: var(--o-green)" ></ o-arc >
< o-arc class = "shrink-50" style = "--o-arc-color: var(--o-cyan)" ></ o-arc >
< o-arc class = "shrink-40" style = "--o-arc-color: var(--o-blue)" ></ o-arc >
< o-arc class = "shrink-30" style = "--o-arc-color: var(--o-indigo)" ></ o-arc >
< o-arc class = "shrink-20" style = "--o-arc-color: var(--o-purple)" ></ o-arc >
< o-arc class = "shrink-10" style = "--o-arc-color: var(--o-pink)" ></ o-arc >
border : 1 px dashed var ( --o-cyan );
--o-gap : 1 ; /* This will be added as default soon*/
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-4">
<o-arc class="grow-0.2x" style="--o-arc-color: var(--o-red)"></o-arc>
<o-arc class="grow-0.4x" style="--o-arc-color: var(--o-orange)"></o-arc>
<o-arc class="grow-0.6x" style="--o-arc-color: var(--o-yellow)"></o-arc>
<o-arc class="grow-1.2X" style="--o-arc-color: var(--o-green)"></o-arc>
<o-arc class="grow-2x" style="--o-arc-color: var(--o-cyan)"></o-arc>
<o-arc class="grow-2.5x" style="--o-arc-color: var(--o-blue)"></o-arc>
<o-arc class="grow-3x" style="--o-arc-color: var(--o-indigo)"></o-arc>
<o-arc class="grow-4x" style="--o-arc-color: var(--o-purple)"></o-arc>
</div>
</div>
</div>
.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}
< div class = "gravity-spot" >
< o-arc class = "grow-0.2x" style = "--o-arc-color: var(--o-red)" ></ o-arc >
< o-arc class = "grow-0.4x" style = "--o-arc-color: var(--o-orange)" ></ o-arc >
< o-arc class = "grow-0.6x" style = "--o-arc-color: var(--o-yellow)" ></ o-arc >
< o-arc class = "grow-1.2X" style = "--o-arc-color: var(--o-green)" ></ o-arc >
< o-arc class = "grow-2x" style = "--o-arc-color: var(--o-cyan)" ></ o-arc >
< o-arc class = "grow-2.5x" style = "--o-arc-color: var(--o-blue)" ></ o-arc >
< o-arc class = "grow-3x" style = "--o-arc-color: var(--o-indigo)" ></ o-arc >
< o-arc class = "grow-4x" style = "--o-arc-color: var(--o-purple)" ></ o-arc >
border : 1 px dashed var ( --o-cyan );
--o-gap : 1 ; /* This will be added as default soon*/
Adjust o-arc gaps
.gap-*
: Set a gap space between o-arcs
ranging from 0 to 30,
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-4">
<o-arc class="gap-0"></o-arc>
<o-arc class="gap-2"></o-arc>
<o-arc class="gap-3"></o-arc>
<o-arc class="gap-4"></o-arc>
<o-arc class="gap-5"></o-arc>
<o-arc class="gap-6"></o-arc>
<o-arc class="gap-7"></o-arc>
<o-arc class="gap-30"></o-arc>
</div>
</div>
</div>
.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
--o-arc-color: var(--o-indigo);
}
< div class = "gravity-spot" >
< o-arc class = "gap-0" ></ o-arc >
< o-arc class = "gap-2" ></ o-arc >
< o-arc class = "gap-3" ></ o-arc >
< o-arc class = "gap-4" ></ o-arc >
< o-arc class = "gap-5" ></ o-arc >
< o-arc class = "gap-6" ></ o-arc >
< o-arc class = "gap-7" ></ o-arc >
< o-arc class = "gap-30" ></ o-arc >
border : 1 px dashed var ( --o-cyan );
--o-gap : 1 ; /* This will be added as default soon*/
--o-arc-color : var ( --o-indigo );
Adjusting radial layout
Arbitrary o-arc 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 range-90">
<o-arc class=" angle-115"></o-arc>
</div>
</div>
</div>
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-arc-color: var(--o-purple);
}