CodePen

HTML

            
              <div class='conic'></div>
            
          
!
via HTML Inspector

CSS

            
              $d: 20em; // diameter
$bggrad: null;
$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, 
      unquote("linear-gradient(") ($j*90 + $i*$u)*1deg,
      hsl($j*90 + $u*$i, 100%, 50%) $v, transparent $v unquote(")"), 
      unquote("linear-gradient(") (($j + 1)*90 - $i*$u)*1deg, 
      transparent 100% - $v,
      hsl(($j + 1)*90 - $u*$i, 100%, 50%) 100% - $v unquote(")");
    }
  }
  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%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................