CodePen

HTML

            
              <div class='conic'></div>
            
          
!

CSS

            
              @import "compass/css3";

$d: 20em; // diameter
$bggrad: ();
$u: .5; // angle unit step
html { background: dimgrey; }
.conic {
  width: $d; height: $d;
  border-radius: 50%;
  @for $i from 0 through 45/$u {
    $a: $u*$i*pi()/180;
    $v: sin($a)/(sqrt(2)*cos(pi()/4 - $a))*100%;
    @for $j from 0 to 4 {
      $bggrad: $bggrad, 
      linear-gradient(($j*90 + $i*$u)*1deg, hsl($j*90 + $u*$i, 100%, 50%) $v, transparent $v), 
      linear-gradient((($j + 1)*90 - $i*$u)*1deg, transparent 100% - $v,  hsl(($j + 1)*90 - $u*$i, 100%, 50%) 100% - $v) !global;
    }
  }
  background: $bggrad;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 
                      100% 100%, 100% 100%, 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................