JSFiddle - React, Tailwind, and code Playground
HTML
<div id="colorWheel">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
SCSS
$pi: 3.14159265359;
$_precision: 10;
@function pow($base, $exp) {
$value: $base;
@if $exp > 1 {
@for $i from 2 through $exp {
$value: $value * $base;
}
}
@if $exp < 1{
@for $i from 0 through -$exp {
$value: $value / $base;
}
}
@return $value;
}
@function fact($num) {
$fact: 1;
@if $num > 0{
@for $i from 1 through $num {
$fact: $fact * $i;
}
}
@return $fact;
}
@function _to_unitless_rad($angle) {
@if unit($angle) == "deg" {
$angle: $angle / 180deg * $pi;
}
@if unit($angle) == "rad" {
$angle: $angle / 1rad;
}
@return $angle;
}
@function sin($angle){
$a: _to_unitless_rad($angle);
$sin: $a;
@for $n from 1 through $_precision {
$sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
}
@return $sin;
}
@function cos($angle){
$a: _to_unitless_rad($angle);
$cos: 1;
@for $n from 1 through $_precision {
$cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
}
@return $cos;
}
@function tan($angle){
@return sin($angle) / cos($angle);
}
$num:25;
@for $i from 1 through $num {
span:nth-child(#{$i}) {
border-top-color: hsl($i * 15, 50%, 50%);
transform: translate(-50%,-50%) rotate($i * (360deg/$num));
}
}
#colorWheel {
width: 300px;
height: 300px;
position: relative;
border-radius: 100%;
overflow: hidden;
}
#colorWheel span {
position: absolute;
border-style: solid;
border-width: 150px (tan(360deg/(2*$num)) * 150px);
left: 50%;
top: 50%;
color:transparent;
}