$n-levels: 13;
$n-edges: 6;
$diam: 5em;
$t: 2s;

$base-angle: 360deg/$n-edges;

.assembly {
  &, * {
    box-sizing: border-box;
    position: absolute;
    top: 50%; left: 50%;
  }
  
  $dim: $n-levels*$diam/2;
  
  margin: -$dim/2;
  width: $dim; height: $dim;
  overflow: hidden;
  background: #191919;
}

.circle {
  margin: -$diam/2;
  border: solid .125em white;
  width: $diam; height: $diam;
  border-radius: 50%;
  
  $n: 1;
  
  @for $l from 1 to $n-levels {
    
    $n-level: $l*$n-edges;
    
    &:nth-child(n + #{$n + 1}) .hexa {
      animation-delay: $l*$t/$n-levels/2;
    }
    
    @for $i from 0 to $n-level {
      
      $poly-cr: $l*$diam/2;
      $poly-ir: $poly-cr*cos($base-angle/2);
      $poly-edge: 2*$poly-cr*sin($base-angle/2);
      $j: $i%$l;
      $poly-edge-diff: abs($j - $l/2)*$poly-edge/$l;
      $dist: sqrt(pow($poly-ir, 2) + pow($poly-edge-diff, 2));
      $curr-angle: $base-angle*(floor($i/$l) - .5) + atan(($j - $l/2)*$poly-edge/$l/$poly-ir);
      
      &:nth-child(#{$n + $i + 1}) {
        transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
        animation: ani-l#{$l}-c#{$i} $t linear infinite;
      }
      
      $poly-cr: $l*$diam;
      $poly-ir: $poly-cr*cos($base-angle/2);
      $poly-edge: 2*$poly-cr*sin($base-angle/2);
      $poly-edge-diff: abs($j - $l/2)*$poly-edge/$l;
      $dist1: sqrt(pow($poly-ir, 2) + pow($poly-edge-diff, 2));
      
      @at-root {
        @keyframes ani-l#{$l}-c#{$i} {
          0%, 5% {
            transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
          }
          
          #{5% + (1 - $l/$n-levels)*45%}, 55% {
            transform: rotate($curr-angle) translate($dist1) rotate(-$curr-angle);
          }
          
          #{55% + (1 - $l/$n-levels)*45%}, 100% {
            transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
          }
        }
      }
      
    }
    
    $n: $n + $n-level;
    
  }
  
  content: $n;
}