<div class="logo">
  <div class="logo__orbit logo__orbit--outer">
    <div class="logo__electron"></div>
    <div class="logo__electron"></div>
    <div class="logo__electron"></div>
    <div class="logo__electron"></div>
    <div class="logo__orbit logo__orbit--inner">
      <div class="logo__electron"></div>
      <div class="logo__electron"></div>
    </div>
  </div>
  <div class="logo__c"></div>
  <img class="logo__arbon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113218/arbon.png" />
</div>
@import "compass";

$orbitWidth: 25px;

$outerRadius: 100px;
$innerRadius: 50px;
$electronRadius: $orbitWidth / 2;
$electronBorderWidth: 5px;

$cHoleRadius: 75px;

$backgroundColor: #363F48;
$outerOrbitColor: #E9EAEB;
$innerOrbitColor: #FD8204;
$electronColor: #A9A8AB;

html, body {
  @include display-flex();
  @include flex-direction(column);
  @include align-items(center);
  @include justify-content(center);
  
  width: 100%;
  height: 100%;
  background: #363F48;
}

@mixin circle( $radius ) {
  border-radius: 50%;
  width: $radius * 2;
  height: $radius * 2;
}

@mixin rotateElectrons( $number, $radius, $speed, $direction:"normal" ) {
  @for $i from 1 through $number {
    @include keyframes(rotate#{$i}of#{$number}) {
      0% { @include transform(rotateZ((360deg/$number) * ($i - 1)) translateX($radius)); }
      100% { @include transform(rotateZ(360deg + (360deg/$number) * ($i - 1)) translateX($radius)); }
    }

    &:nth-child(#{$i}) {
      @include animation(rotate#{$i}of#{$number} $speed infinite linear unquote($direction));
    }
  }
}

.logo {
  position: relative;
  width: ($outerRadius + $orbitWidth) * 2 + (522px - 62px);
  height: ($outerRadius + $orbitWidth) * 2;
}

.logo__orbit {
  border: $orbitWidth solid;
  position: absolute;
}

.logo__orbit--outer {
  @include circle( $outerRadius );
  border-color: $outerOrbitColor;
  
  > .logo__electron {
    top: $outerRadius - $electronRadius - $electronBorderWidth;
    left: $outerRadius - $electronRadius - $electronBorderWidth;
    @include rotateElectrons( 4, $outerRadius + $electronRadius, 4s );
  }
}

.logo__orbit--inner {
  @include circle( $innerRadius );
  
  position: absolute;
  top: $outerRadius - $innerRadius - $orbitWidth;
  left: $outerRadius - $innerRadius - $orbitWidth;
    
  border-color: $innerOrbitColor;
  
  > .logo__electron {
    top: $innerRadius - $electronRadius - $electronBorderWidth;
    left: $innerRadius - $electronRadius - $electronBorderWidth;
    @include rotateElectrons( 2, $innerRadius + $electronRadius, 4s, "reverse" );
  }
}

.logo__electron {
  @include circle( $electronRadius );
  position: absolute;
  background: $electronColor;
  border: $electronBorderWidth $backgroundColor solid;
}

.logo__c {
  position: absolute;
  top: $outerRadius - $cHoleRadius + $electronRadius;
  left: (($outerRadius + $orbitWidth) * 2) - $cHoleRadius - $electronRadius * 2;
  
  @include circle( $electronRadius );
  border: $cHoleRadius $backgroundColor solid;
}

.logo__arbon {
  position: absolute;
  top: 7px;
  left: (($outerRadius + $orbitWidth) * 2) - 62px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.