o-arc custom element

<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-color and --o-hover-color in a o-arc style.


o-arc.cyan {
--o-color: var(--o-cyan-light);
--o-hover-color: var(--o-cyan)
}
o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: var(--o-purple)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<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-color: var(--o-cyan-light);
--o-hover-color: var(--o-cyan)
}
o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: var(--o-purple)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--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.


.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-color: var(--o-purple-light);
--o-hover-color: var(--o-orange)
}
o-arc.purple {
--o-color: var(--o-purple);
--o-hover-color: var(--o-orange)
}
o-arc.purple-dark {
--o-color: var(--o-purple-dark);
--o-hover-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<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-color: var(--o-purple-light);
--o-hover-color: var(--o-orange)
}
o-arc.purple {
--o-color: var(--o-purple);
--o-hover-color: var(--o-orange)
}
o-arc.purple-dark {
--o-color: var(--o-purple-dark);
--o-hover-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--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.



.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc style="--o-color: var(--o-red)"></o-arc>
      <o-arc class="shrink-90" style="--o-color: var(--o-orange)"></o-arc>
      <o-arc class="shrink-80" style="--o-color: var(--o-yellow)"></o-arc>
      <o-arc class="shrink-70" style="--o-color: var(--o-color)"></o-arc>
      <o-arc class="shrink-60" style="--o-color: var(--o-green)"></o-arc>
      <o-arc class="shrink-50" style="--o-color: var(--o-cyan)"></o-arc>
      <o-arc class="shrink-40" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="shrink-30" style="--o-color: var(--o-indigo)"></o-arc>
      <o-arc class="shrink-20" style="--o-color: var(--o-purple)"></o-arc>
      <o-arc class="shrink-10" style="--o-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*/
}

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

o-arc {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <o-arc class="grow-0.2x" style="--o-color: var(--o-red)"></o-arc>
      <o-arc class="grow-0.4x" style="--o-color: var(--o-orange)"></o-arc>
      <o-arc class="grow-0.6x" style="--o-color: var(--o-yellow)"></o-arc>
      <o-arc class="grow-1.2X" style="--o-color: var(--o-green)"></o-arc>
      <o-arc class="grow-2x" style="--o-color: var(--o-cyan)"></o-arc>
      <o-arc class="grow-2.5x" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="grow-3x" style="--o-color: var(--o-indigo)"></o-arc>
      <o-arc class="grow-4x" style="--o-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*/
}

Adjust o-arc gaps

.gap-*: Set a gap space between o-arcs ranging from 0 to 30,


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

o-arc {
--o-gap: 1; /* This will be added as default soon*/
--o-color: var(--o-indigo);
}

HTML
CSS

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



.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-arc {
--o-color: var(--o-purple);
}

HTML
CSS

<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-color: var(--o-purple);
}

Relative o-arc orbital position

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

.inner-orbit: To place ano-arc just below its orbit.

.outer-orbit: To place o-arc just above its orbit.

.quarter-inner-orbit: To place o-arc a 25% into its orbit.

.quarter-outer-orbit: To place o-arc a 25% outer its orbit.


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

o-arc {
--o-color: var(--o-pink);
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-arc class="outer-orbit "></o-arc>
        <o-arc class="quarter-outer-orbit"></o-arc>
        <o-arc class="quarter-inner-orbit"></o-arc>
        <o-arc class="inner-orbit"></o-arc>
      </div>

  </div>

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

o-arc {
--o-color: var(--o-pink);
--o-gap: 1; /* This will be added as default soon*/
}

Rendering curved text.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <o-arc>o-arc Custom Element allows</o-arc> <o-arc>render curved text content</o-arc> </div> </div> </div>

body {
  
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <o-arc>o-arc Custom Element allows</o-arc>
      <o-arc>render curved text content</o-arc>
    </div>
  </div>
</div>

o-arc {
--o-color: transparent !important
}

Changing text colors

Font colors, size and other font properties

To change o-arc any CSS font properties just added in a o-arc style or class.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-arc class="cyan">This text is cyan and bold</o-arc> <o-arc class="purple">This text is purple and capitalized</o-arc> </div> </div> </div>


o-arc.cyan {
color: var(--o-cyan);
font-weight: bold;

}
o-arc.cyan:hover {
color: var(--o-blue);
font-weight: bold
}

o-arc.purple {
color: var(--o-purple);
text-transform: uppercase;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc class="cyan">This text is cyan and bold</o-arc>
      <o-arc class="purple">This text is purple and capitalized</o-arc>

    </div>
  </div>
</div>

o-arc.cyan {
color: var(--o-cyan);
font-weight: bold;

}
o-arc.cyan:hover {
color: var(--o-blue);
font-weight: bold
}

o-arc.purple {
color: var(--o-purple);
text-transform: uppercase;
}

Background colors

To change o-arc background color use CSS custom var --o-color and -o--hover-text-color in a o-arc style.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-arc class="cyan">This text is cyan</o-arc> <o-arc class="purple">This text is purple</o-arc> </div> </div> </div>


o-arc.cyan {
--o-color: var(--o-cyan-light);
--o-hover-color: green

}
o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: white
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc class="cyan">This text is cyan</o-arc>
      <o-arc class="purple">This text is purple</o-arc>

    </div>
  </div>
</div>

o-arc.cyan {
--o-color: var(--o-cyan-light);
--o-hover-color: green

}
o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: white
}

Changing text justification

Use text-anchor attribute

o-arc has one special attribute: text-anchor to arrange its content. You can choose between start, middle, and end values.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-arc text-anchor="start" class="purple">This text starts at begining</o-arc> <o-arc text-anchor="middle" class="purple">This text starts at middle</o-arc> <o-arc text-anchor="end" class="purple">This text is at end</o-arc> </div> </div> </div>



o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: var(--o-purple)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
color: var(--o-purple-dark);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc text-anchor="start" class="purple">This text starts at begining</o-arc>
      <o-arc text-anchor="middle" class="purple">This text starts at middle</o-arc>
      <o-arc text-anchor="end" class="purple">This text is at end</o-arc>
    </div>
  </div>
</div>

o-arc.purple {
--o-color: var(--o-purple-light);
--o-hover-color: var(--o-purple)
}
o-arc:hover{
cursor: pointer
}
o-arc {
--o-gap: 1; /* This will be added as default soon*/
color: var(--o-purple-dark);
}

Use flip attribute

o-arc allows upside down its content to using flip attribute. Useful to make text more legible.

<div class="wrapper"> normal <div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <o-arc >Jan</o-arc> <o-arc >Feb</o-arc> <o-arc >Mar</o-arc> <o-arc >Apr</o-arc> <o-arc >May</o-arc> <o-arc >Jun</o-arc> <o-arc >Jul</o-arc> <o-arc >Aug</o-arc> <o-arc >Sep</o-arc> <o-arc >Oct</o-arc> <o-arc >Nov</o-arc> <o-arc >Dic</o-arc> </div> </div> </div> </div> <div class="wrapper"> with flip atribute <div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <o-arc >Jan</o-arc> <o-arc >Feb</o-arc> <o-arc >Mar</o-arc> <o-arc flip>Apr</o-arc> <o-arc flip>May</o-arc> <o-arc flip>Jun</o-arc> <o-arc flip>Jul</o-arc> <o-arc flip>Aug</o-arc> <o-arc flip>Sep</o-arc> <o-arc >Oct</o-arc> <o-arc >Nov</o-arc> <o-arc >Dic</o-arc> </div> </div> </div> </div>


.wrapper {
border: 1px dotted var(--o-purple);
height: 200px;
width: 200px;
float: left;
overflow: hidden;
margin: 5px;
color: var(--o-blue-dark);
}
.gravity-spot {
--o-force: 400px
}
o-arc[flip] {
color: red
}

o-arc:hover{
cursor: pointer
}
o-arc {
color: var(--o-blue-dark);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc fit-range class="orange"> This text is along all text path </o-arc>

    </div>
  </div>
</div>

o-arc.orange {
--o-color: var(--o-orange-light);
--o-hover-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
color: var(--o-orange-dark);
}

Use fit-range attribute

o-arc allows distribute its content to fill text-length using fit-range attribute.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-arc fit-range class="orange"> This text is along all text path </o-arc> </div> </div> </div>



o-arc.orange {
--o-color: var(--o-orange-light);
--o-hover-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
color: var(--o-orange-dark);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-arc fit-range class="orange"> This text is along all text path </o-arc>

    </div>
  </div>
</div>

o-arc.orange {
--o-color: var(--o-orange-light);
--o-hover-color: var(--o-orange)
}
o-arc:hover{
cursor: pointer
}
o-arc {
color: var(--o-orange-dark);
}

Use o-arc to create charts

To create pie / sunburst or donut charts simple use attribute value from 0 to 100 in o-arc.


.satellite {
border: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-3 ">
      <o-arc class="grow-1x  gap-0 " value="50" style="--o-color: var(--o-red)"></o-arc>
      <o-arc class="grow-1x gap-0  " value="25" style="--o-color: var(--o-orange);"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="15" style="--o-color: var(--o-yellow)"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="5" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="5" style="--o-color: var(--o-green)"></o-arc>
    </div>
    <div class="orbit-3 ">
      <div class="satellite angle-90" style="font-size:15px; font-weight: bold;  color: var(--o-red-darker);">50</div>
      <div class="satellite angle-225" style="font-size:15px; font-weight: bold;  color: var(--o-orange-darker);">25</div>
      <div class="satellite angle-295" style="font-size:15px; font-weight: bold;  color: var(--o-yellow-darker);">15</div>
      <div class="satellite angle-333" style="font-size:15px; font-weight: bold;  color: var(--o-blue-darker);">5</div>
      <div class="satellite angle-350" style="font-size:15px; font-weight: bold;  color: var(--o-green-darker);">5</div>
    </div>
  </div>
</div>

.satellite {
border: transparent
}