Chemical structure

Caffeine


.satellite {
  border: none
}

HTML
CSS

<div class="bigbang" style="background: white">
  <div class="gravity-spot">
    <div class="orbit-0">
      <div class="satellite  at-center ">
        <div class="gravity-spot">
          <div class="orbit-2 ">
            <div class="vector grow-0.7x outer-orbit angle-0"
              style="height: 7px; background: transparent; border-top: 1px solid currentColor;border-bottom: 1px solid currentColor;">
            </div>
            <div class="vector grow-0.7x outer-orbit angle-180"></div>
            <div class="vector grow-0.7x outer-orbit angle-240"
              style="height: 7px; background: transparent; border-top: 1px solid currentColor;border-bottom: 1px solid currentColor;">
            </div>
            <div class="vector grow-0.7x outer-orbit angle-300"></div>
          </div>
          <div class="orbit-2 ">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
          <div class="orbit-2 ">
            <div class="satellite angle-180" style="background: white;">N</div>
            <div class="satellite angle-300" style="background: white;">N</div>
          </div>
          <div class="orbit-4 range-180 ccw fit-range">
            <div class="satellite inner-orbit" style="background: white;">O</div>
            <div class="satellite " style="background: white;">
             <div class="capsule">H<sub>3</sub>C</div>
            </div>
            <div class="satellite" style="background: white;">O</div>
            <div class="satellite " style="background: white;">
             <div class="capsule">CH<sub>3</sub></div>
             </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-4 shrink-90 ">
      <div class="satellite angle-90 ">
        <div class="gravity-spot">
          <div class="orbit-2  shrink-30 ">
            <div class="vector grow-0.7x outer-orbit angle-18"></div>
          </div>
          <div class="orbit-2 shrink-60 from-36">
            <div class="side" style="background: transparent;">
            </div>
            <div class="side">
            </div>
            <div class="side" style="background: transparent;">
            </div>
            <div class="side">
            </div>
            <div class="side" style="background: transparent;">
            </div>
          </div>
          <div class="orbit-2 shrink-30 from-36">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
          <div class="orbit-2 shrink-30">
            <div class="satellite angle-18" style="background: white;">N</div>
            <div class="satellite angle-165" style="background: white;">N</div>
          </div>
          <div class="orbit-4 shrink-30">
            <div class="satellite angle-18" style="background: white;">
            <div class="capsule">CH<sub>3</sub></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.satellite {
  border: none
}

Show & Tell

Join to our Github Discussion and show off what have you done with Orbit.