<svg viewBox="0 0 32 32" class="colorwheel">
  <defs>
    <g id="wheel">
      <circle class="c12" cx="16" cy="16" r="16"></circle>
      <circle class="c11" cx="16" cy="16" r="16"></circle>
      <circle class="c10" cx="16" cy="16" r="16"></circle>
      <circle class="c9" cx="16" cy="16" r="16"></circle>
      <circle class="c8" cx="16" cy="16" r="16"></circle>
      <circle class="c7" cx="16" cy="16" r="16"></circle>
      <circle class="c6" cx="16" cy="16" r="16"></circle>
      <circle class="c5" cx="16" cy="16" r="16"></circle>
      <circle class="c4" cx="16" cy="16" r="16"></circle>
      <circle class="c3" cx="16" cy="16" r="16"></circle>
      <circle class="c2" cx="16" cy="16" r="16"></circle>
      <circle class="c1" cx="16" cy="16" r="16"></circle>
    </g>
  </defs>
  <use href="#wheel" class="r11" />
  <use href="#wheel" class="r10" />
  <use href="#wheel" class="r9" />
  <use href="#wheel" class="r8" />
  <use href="#wheel" class="r7" />
  <use href="#wheel" class="r6" />
  <use href="#wheel" class="r5" />
  <use href="#wheel" class="r4" />
  <use href="#wheel" class="r3" />
  <use href="#wheel" class="r2" />
  <use href="#wheel" class="r1" />
</svg>

body {
  --r: 0deg;
  --s: 100%;
  background-color: hsl(180, var(--s), 80%);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.colorwheel {
  --u: calc(100 / 12);
  border-radius: 50%;
  transform: rotate(-90deg);
  width: 100%;
}
.colorwheel circle {
  fill: none;
}
.colorwheel use {
  transform-origin: 50% 50%;
}

.c1 {
  stroke: hsl(0, var(--s), var(--l));
  stroke-dasharray: var(--u) 100;
}
.c2 {
  stroke: hsl(30, var(--s), var(--l));
  stroke-dasharray: calc(2 * var(--u)) 100;
}
.c3 {
  stroke: hsl(60, var(--s), var(--l));
  stroke-dasharray: calc(3 * var(--u)) 100;
}
.c4 {
  stroke: hsl(90, var(--s), var(--l));
  stroke-dasharray: calc(4 * var(--u)) 100;
}
.c5 {
  stroke: hsl(120, var(--s), var(--l));
  stroke-dasharray: calc(5 * var(--u)) 100;
}
.c6 {
  stroke: hsl(150, var(--s), var(--l));
  stroke-dasharray: calc(6 * var(--u)) 100;
}
.c7 {
  stroke: hsl(180, var(--s), var(--l));
  stroke-dasharray: calc(7 * var(--u)) 100;
}
.c8 {
  stroke: hsl(210, var(--s), var(--l));
  stroke-dasharray: calc(8 * var(--u)) 100;
}
.c9 {
  stroke: hsl(240, var(--s), var(--l));
  stroke-dasharray: calc(9 * var(--u)) 100;
}
.c10 {
  stroke: hsl(270, var(--s), var(--l));
  stroke-dasharray: calc(10 * var(--u)) 100;
}
.c11 {
  stroke: hsl(300, var(--s), var(--l));
  stroke-dasharray: calc(11 * var(--u)) 100;
}
.c12 {
  stroke: hsl(330, var(--s), var(--l));
  stroke-dasharray: 100.75 100;
}
.r1 {
  --l: 40%;
  stroke-width: 3;
  transform: rotate(var(--r));
}
.r2 {
  --l: 45%;
  stroke-width: 6;
  transform: rotate(calc(2 * var(--r)));
}
.r3 {
  --l: 50%;
  stroke-width: 9;
  transform: rotate(calc(3 * var(--r)));
}
.r4 {
  --l: 55%;
  stroke-width: 12;
  transform: rotate(calc(4 * var(--r)));
}
.r5 {
  --l: 60%;
  stroke-width: 15;
  transform: rotate(calc(5 * var(--r)));
}
.r6 {
  --l: 65%;
  stroke-width: 18;
  transform: rotate(calc(6 * var(--r)));
}
.r7 {
  --l: 70%;
  stroke-width: 21;
  transform: rotate(calc(7 * var(--r)));
}
.r8 {
  --l: 75%;
  stroke-width: 24;
  transform: rotate(calc(8 * var(--r)));
}
.r9 {
  --l: 80%;
  stroke-width: 27;
  transform: rotate(calc(9 * var(--r)));
}
.r10 {
  --l: 85%;
  stroke-width: 30;
  transform: rotate(calc(10 * var(--r)));
}
/* Last ring: inner circle */
.r11 {
  --l: 90%;
  stroke-width: 32;
  transform: rotate(calc(11 * var(--r)));
}