几种颜色填充圆圈周围的笔画

.circle {
  background: conic-gradient(#f00, #ff00bd, #0020ff, #00f3ff, #00ff08, #fff700, #f00);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: relative;
}

.circle:after {
  position: absolute;
  content: "";
  left: 20px;
  top: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: #fff;
  border-radius: 50%;
}

<div class="circle"></div>

<script src="https://leaverou.github.io/prefixfree/prefixfree.min.js"></script>
<script src="https://leaverou.github.io/conic-gradient/conic-gradient.js"></script>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="220" height="220" viewBox="-10 -10 220 220">
      <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000"/>   
            <stop offset="100%" stop-color="#ffff00"/>   
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00"/>   
            <stop offset="100%" stop-color="#00ff00"/>   
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00"/>   
            <stop offset="100%" stop-color="#00ffff"/>   
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff"/>   
            <stop offset="100%" stop-color="#0000ff"/>   
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff"/>   
            <stop offset="100%" stop-color="#ff00ff"/>   
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff"/>   
            <stop offset="100%" stop-color="#ff0000"/>   
        </linearGradient>
      </defs>
    
      <g fill="none" stroke-width="15" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
      </g>
    </svg>

function makeColourWheel(numSegments)
{
    if (numSegments <= 0)
        numSegments = 12;
    if (numSegments > 360)
        numSegments = 360;

    var  svgns = xmlns="http://www.w3.org/2000/svg";
    var  svg = document.getElementById("colourwheel");
    var  defs = svg.getElementById("defs");
    var  paths = svg.getElementById("paths");

    var  radius = 100;
    var  stepAngle = 2 * Math.PI / numSegments;

    var  lastX = 0;
    var  lastY = -radius;
    var  lastAngle = 0;
    
    for (var i=1; i<=numSegments; i++)
    {
        var  angle = i * stepAngle;

        // Рассчитайте эту конечную точку дуги
        var x = radius * Math.sin(angle);
        var y = -radius * Math.cos(angle);
        // Создайте элемент пути
        var arc = document.createElementNS(svgns, "path");
        arc.setAttribute("d", "M " + lastX.toFixed(3) + "," + lastY.toFixed(3)
                              + " A 100,100 0 0,1 " + x.toFixed(3) + "," + y.toFixed(3));
        arc.setAttribute("stroke", "url(#wheelseg" + i + ")");
        // Добавьте его в наш SVG
        paths.appendChild(arc);
        
        // Создайте градиент для этого сегмента
        var grad = document.createElementNS(svgns, "linearGradient");
        grad.setAttribute("id", "wheelseg"+i);
        grad.setAttribute("gradientUnits", "userSpaceOnUse");
        grad.setAttribute("x1", lastX.toFixed(3));
        grad.setAttribute("y1", lastY.toFixed(3));
        grad.setAttribute("x2", x.toFixed(3));
        grad.setAttribute("y2", y.toFixed(3));
        // Сделайте stop 0% для этого градиента
        var stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "0%");
        hue = Math.round(lastAngle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        //Сделайте 100% stop для этого градиента
        stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "100%");
        hue = Math.round(angle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        // Добавьте градиент к SVG
        defs.appendChild(grad);

        // Обновите последние x/y
        lastX = x;
        lastY = y;
        lastAngle = angle;
    }
}


makeColourWheel(60);

<svg id="colourwheel" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
  <defs id="defs">
  </defs>

  <g id="paths" fill="none" stroke-width="15" transform="translate(100,100)">
  </g>
</svg>

<svg version="2" viewBox="-207 -207 414 414" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <radialGradient id="gWt">
   <stop style="stop-color:#fff" offset="0"/>
   <stop style="stop-color:#fff0" offset="1"/>
  </radialGradient>
  <!-- part for firefox: using central projection of 3 rectangles -->
  <linearGradient id="gYM" x1="0" x2="0" y1="0" y2="100%">
   <stop style="stop-color:#ef08" offset="0"/>
   <stop style="stop-color:#ff0" offset=".005"/>
   <stop style="stop-color:#fc0" offset=".1827"/>
   <stop style="stop-color:#f90" offset=".2924"/>
   <stop style="stop-color:#f60" offset=".3728"/>
   <stop style="stop-color:#f00" offset=".5"/>
   <stop style="stop-color:#f06" offset=".6272"/>
   <stop style="stop-color:#f09" offset=".7076"/>
   <stop style="stop-color:#f0c" offset=".8173"/>
   <stop style="stop-color:#f0f" offset=".995"/>
   <stop style="stop-color:#e0f8" offset="1"/>
  </linearGradient>
  <linearGradient id="gCY" href="#gYM">
   <stop style="stop-color:#0ef8" offset="0"/>
   <stop style="stop-color:#0ff" offset=".005"/>
   <stop style="stop-color:#0fc" offset=".1827"/>
   <stop style="stop-color:#0f9" offset=".2924"/>
   <stop style="stop-color:#0f6" offset=".3728"/>
   <stop style="stop-color:#0f0" offset=".5"/>
   <stop style="stop-color:#6f0" offset=".6272"/>
   <stop style="stop-color:#9f0" offset=".7076"/>
   <stop style="stop-color:#cf0" offset=".8173"/>
   <stop style="stop-color:#ff0" offset=".995"/>
   <stop style="stop-color:#fe08" offset="1"/>
  </linearGradient>
  <linearGradient id="gMC" href="#gYM">
   <stop style="stop-color:#f0e8" offset="0"/>
   <stop style="stop-color:#f0f" offset=".005"/>
   <stop style="stop-color:#c0f" offset=".1827"/>
   <stop style="stop-color:#90f" offset=".2924"/>
   <stop style="stop-color:#60f" offset=".3728"/>
   <stop style="stop-color:#00f" offset=".5"/>
   <stop style="stop-color:#06f" offset=".6272"/>
   <stop style="stop-color:#09f" offset=".7076"/>
   <stop style="stop-color:#0cf" offset=".8173"/>
   <stop style="stop-color:#0ff" offset=".995"/>
   <stop style="stop-color:#0fe8" offset="1"/>
  </linearGradient>
  <rect id="r" width="200" height="700" style="transform:matrix3d(
      -29,0,0,100,
      0,1,0,0,
      0,0,1,0,
      200,-350,1,1
    )"/>
 </defs>
 <clipPath id="cc">
  <path d="M200,0A200,200,0, 1,0,0,200 200,200,0,0,0,200,0zM100,0A100,100,0, 0,1,0,100 100,100,0, 1,1,100,0z"/>
 </clipPath>
 <!-- circle r="199" fill="#000"/ -->
 <g clip-path="url(#cc)" id="m">
  <use href="#r" fill="url(#gCY)" transform="rotate(-120)"/>
  <use href="#r" fill="url(#gYM)"/>
  <use href="#r" fill="url(#gMC)" transform="rotate(120)"/>
  <!-- for Chrome use conic gradient (does not work with any svg object but with foreign)
   Firefox ignores this object due to unknown keyword in style -->
 <foreignObject width="400" height="400" x="-200" y="-200" style="background:conic-gradient(from 90deg,
   #f00,#f0f,#00f,#0ff,#0f0,#ff0,#f00);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;"/>
 </g>
</svg>

*{
    margin:0;
    padding:0;
}
.c{
   height:90vmin;
   width:90vmin;
   margin:5vmin;
   overflow: hidden;
   border-radius:50%;
   position:absolute;
}
.c>div{
   position:relative;
   height:180vmin;
   width:100vmin;
   perspective: 0.40vmin;
   top:-45vmin;
   left:-4.8vmin;
}
.c>div>div{
   height: 100%;
   width: 100%;
   left:0;
   top:1%;
   height: 98%;
   transform-origin:99.98% 50%;
   position:relative;
   transform: rotate3d(0, 1, 0, -80deg);
   border:black;
}
#YM>div{
   background:linear-gradient(#ef08,#ff0 0.5%,#fc0 18.27%,#f90 29.24%,#f60 37.28%,#f00 50%,#f06 62.72%,#f09 70.76%,#f0c 81.73%,#f0f 99.5%,#e0f8);
}
#MC{
   transform: rotateZ(120deg);
}
#CY{
   transform: rotateZ(-120deg);
}
#MC>div{
   background:linear-gradient(#f0e8,#f0f 0.5%,#c0f 18.27%,#90f 29.24%,#60f 37.28%,#00f 50%,#06f 62.72%,#09f 70.76%,#0cf 81.73%,#0ff 99.5%,#0fe8);
}
#CY>div{
   background:linear-gradient(#0ef8,#0ff 0.5%,#0fc 18.27%,#0f9 29.24%,#0f6 37.28%,#0f0 50%,#6f0 62.72%,#9f0 70.76%,#cf0 81.73%,#ff0 99.5%,#fe08);
}

<div class="c"><div id="YM"><div></div></div></div>
<div class="c"><div id="MC"><div></div></div></div>
<div class="c"><div id="CY"><div></div></div></div>