$segments: 72; /* number of sectors in outer circle */
$iSeg: 72; /* number of sectors in inner circle */
$secSeg: ($segments / 2); /* number of sectors to fade through for the outer circle */
$size: 200px; /* width and height of outer circle */
$size2: 150px; /* width and height of inner circle */
$pi:3.14159; /* pi to 5 decimal places */
$n:(360 / $segments); /* the degrees in each sector for outer circle */
$n2:(360 / $iSeg); /* degrees in each sector for inner circle */
$r:($size / 2); /* radius of outer circle */
$r2: ($size2 / 2); /* radius of inner circle */
$arc: (($n / 360) * (2 * $pi * $r) );  /* length of the arc of each sector for outside circle */
$arc2: (($n2 / 360) * (2 * $pi * $r2) ); /* length of the arc of each sector for inside sector */
$color: rgba(0,0,0,1); /* initial color */
$color2: rgba(255,255,255,1); /* secondary color */
body {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  width:100%;
  height:100%;
}
/* outer circle */
.outer {
  width:$size;
  height:$size;
  margin:50px auto 0;
  position:relative;
  transform-origin:0% 50%;
}
.segment {
  width:$arc;
  height:($size / 2);
  border-left:($arc / 2) solid rgba(0,0,0,0);
  border-right:($arc / 2) solid rgba(0,0,0,0);
  border-top:($size / 2) solid $color2;
  box-sizing:border-box;
  position:absolute;
  transform-origin:50% 100%;
}
@for $i from 1 through $segments {
  .segment:nth-of-type(#{$i}) {
    transform:rotate(-#{$i * $n}deg);
  }
  @if $i < $secSeg {
    .segment:nth-of-type(#{$i}) {
      border-top-color:lighten($color, (100 / $secSeg * $i));
    }
  }
}
/* inner circle */
.inner {
  width:$size2;
  height:$size2;
  margin:0 auto;
  position:relative;
  border-radius:50%;
  top:-#{$size2 + ($size2 / 6)};
  left:-27px;
  transform-origin:0% 50%;
  transform:rotate(-#{0.7 * $n2}deg);
}
.iSeg {
  width:$arc2;
  height:($size2 / 2);  
  border-left:($arc2 / 2) solid rgba(0,0,0,0);
  border-right:($arc2 / 2) solid rgba(0,0,0,0);
  border-top:($size2 / 2) solid $color2;
  box-sizing:border-box;
  position:absolute;
  transform-origin:50% 100%;
}
@for $i from 1 through $iSeg {
  .iSeg:nth-of-type(#{$i}) {
    transform:rotate(#{$i * $n2}deg);
    border-top-color:$color;
    border-top-color:lighten($color, (100 / $iSeg * $i));
  }
}