Javascript svg circular gradiant

Question

I have a problem to solve. I want to draw a circle svg with gradient fonts based on a score. The score varies from 0 to 100. If the score is 60% for example, I have to draw 60% of the circle knowing that the gradient changes every 20%. I would like to do something like the following image but with gradients:

I saw the example below which could be useful to me, but I don't understand how the coordinates of the M in path are calculated:

<svg width="300" height="300">
    <linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#01E400"></stop>
       <stop offset="100%" stop-color="#FEFF01"></stop>
    </linearGradient>
    <linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
       <stop offset="0%" stop-color="#FEFF01"></stop>
       <stop offset="100%" stop-color="#FF7E00"></stop>
    </linearGradient>
    <linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#FF7E00"></stop>
       <stop offset="100%" stop-color="#FB0300"></stop>
    </linearGradient>
    <linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
       <stop offset="0%" stop-color="#FB0300"></stop>
       <stop offset="100%" stop-color="#9B004A"></stop>
    </linearGradient>
    <linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
       <stop offset="0%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
    <linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
       <stop offset="0%" stop-color="#7D0022"></stop>
       <stop offset="100%" stop-color="#01E400"></stop>
    </linearGradient>
    <path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearColors1)" stroke-width="5" />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke-width="5" />
  <path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearColors3)" stroke-width="5" />
  <path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearColors4)" stroke-width="5" />
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke-width="5" />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke-width="5" />
</svg>

Can you help me solve this problem or explain to me the calculation logic of the M in the example above?

Thanks very much !

Check [@ray's answer](https://stackoverflow.com/questions/70648538/pie-chart-using-circle-element/#70660415) explaining the math. Since svg doesn't support conic-gradients (you have to emulate them) you might try these css solutions by [temani afif](https://stackoverflow.com/questions/56797060/css-only-pie-chart-how-to-add-spacing-padding-between-slices/56799618#56799618) — herrstrietzel, Jan 18 '23 at 19:44
Should the gradient be fixed or change with the value? So if the value is 5 should you see all the colors or only a blueish gradient? — chrwahl, Jan 19 '23 at 06:14

chrwahl · Answer 1 · 2023-01-20T09:02:12.697

Instead of using the path element I use a circle and the stroke-dasharray attribute. I create a circle "slice" (1/5 if a circle) and then use <use> for reusing the slice. The value is controlled by a mask (and the stroke-dasharray of a circle).

Each gradient is used on the different use elements. You can see that they are all the same. Basically it fits the initial circle slice. After being applied each circle slice is rotated.

Here is an example of the circle element with the stroke-dasharray and the gradient. I added the gradient to the fill so that you can see what it looks like:

<svg width="250" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="lg1" gradientTransform="rotate(36) translate(.2 0)">
       <stop offset="25%" stop-color="DodgerBlue"/>
       <stop offset="75%" stop-color="Green"/>
    </linearGradient>
  </defs>
  <g transform="translate(50 50)">
    <circle id="c1" r="45" stroke-width="10" fill="url(#lg1)"
      stroke="url(#lg1)" stroke-dasharray="0 74 21 20" pathLength="100" />
  </g>
</svg>

And this is the end result:

document.forms.form01.range.addEventListener('change', e => {
  document.getElementById('c2').setAttribute('stroke-dasharray', `${e.target.value} 200`);
  document.getElementById('t1').textContent = `${e.target.value}%`;
});

<form name="form01">
<input type="range" name="range" min="0" max="100" value="71"/>
</form>
<svg width="250" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="temp1" gradientTransform="rotate(36) translate(.2 0)"/>
    <linearGradient id="lg1" href="#temp1">
       <stop offset="25%" stop-color="DodgerBlue"/>
       <stop offset="75%" stop-color="Green"/>
    </linearGradient>
    <linearGradient id="lg2" href="#temp1">
       <stop offset="25%" stop-color="Green"/>
       <stop offset="75%" stop-color="Yellow"/>
    </linearGradient>
    <linearGradient id="lg3" href="#temp1">
       <stop offset="25%" stop-color="Yellow"/>
       <stop offset="75%" stop-color="Orange"/>
    </linearGradient>
    <linearGradient id="lg4" href="#temp1">
       <stop offset="25%" stop-color="Orange"/>
       <stop offset="75%" stop-color="DarkOrchid"/>
    </linearGradient>
    <linearGradient id="lg5" href="#temp1">
       <stop offset="25%" stop-color="DarkOrchid"/>
       <stop offset="75%" stop-color="Red"/>
    </linearGradient>
    <circle id="c1" r="45" stroke-width="10" fill="none"
      stroke-dasharray="0 74 21 20" pathLength="100" />
    <mask id="m1">
      <circle id="c2" r="45" stroke-width="10" fill="none" stroke="white"
        stroke-dasharray="71 100" pathLength="104" transform="rotate(-83)"
        stroke-linecap="round" />
    </mask>
  </defs>
  <g transform="translate(50 50)" mask="url(#m1)">
    <use href="#c1" stroke="url(#lg1)"/>
    <use href="#c1" stroke="url(#lg2)" transform="rotate(72)"/>
    <use href="#c1" stroke="url(#lg3)" transform="rotate(144)"/>
    <use href="#c1" stroke="url(#lg4)" transform="rotate(216)"/>
    <use href="#c1" stroke="url(#lg5)" transform="rotate(288)"/>
  </g>
  <text id="t1" x="50" y="50" font-family="sans-serif" text-anchor="middle"
    dominant-baseline="middle">71%</text>
</svg>

OMG, thank you guys for your answers, yesterday, i was doing a lot of maths trying to find a solution with rotatin considering the two center. Thank you a lot for the easier solution !!! — Soilih Ben Soilih, Jan 20 '23 at 14:20

score 0 · Answer 2 · answered Jan 18 '23 at 21:43

Svgs are quite tricky to just code.

I could not make your circle thicker even in Adobe Illustrator as it breaks the gradient. And the reason for it is that SVG does only support gradient inside a stroke, not along or across.

This also a reason why your annulus (circle) is broken into 6 separate sectors.

So, keep in mind that it will be very hard to come up with general solution because you are using gradient. Every design would need custom implementation

My solution:

I copied and connected all the 6 paths of the circle from your example into one circle. Then broke down it into 100 pieces which would represent the percents and colored it grey.

Then I just put it on top of the gradient circle.

Here is the code for the SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 277.7952881 277.7952881" enable-background="new 0 0 277.7952881 277.7952881" xml:space="preserve">
<g id="Layer_2">
    <g id="gradient">
        
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-156.1584625" y1="555.276123" x2="-155.1584625" y2="554.276123" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33325.2265625)">
            <stop  offset="0" style="stop-color:#5CB130"/>
            <stop  offset="1" style="stop-color:#F2E500"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_1_)" stroke-width="5" d="M138.8976288,18.8976383
            c42.8718567,0.0000153,82.4870758,22.8718815,103.9230042,60"/>
        
            <linearGradient id="SVGID_00000066511025684526834950000005985987899688685485_" gradientUnits="userSpaceOnUse" x1="-147.1517181" y1="557.5291138" x2="-147.1517181" y2="556.5291138" gradientTransform="matrix(16.0769653 0 0 -120 2632.1657715 66982.390625)">
            <stop  offset="0" style="stop-color:#F2E500"/>
            <stop  offset="1" style="stop-color:#EF7D1A"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_00000066511025684526834950000005985987899688685485_)" stroke-width="5" d="
            M242.8206329,78.8976364c21.4359589,37.1281281,21.4359589,82.8718796,0,120.0000076"/>
        
            <linearGradient id="SVGID_00000061460617045725905590000012120539635448511164_" gradientUnits="userSpaceOnUse" x1="-155.1584625" y1="554.9348145" x2="-156.1584625" y2="553.9348145" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33505.2265625)">
            <stop  offset="0" style="stop-color:#EF7D1A"/>
            <stop  offset="1" style="stop-color:#E5251E"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_00000061460617045725905590000012120539635448511164_)" stroke-width="5" d="
            M242.8206329,198.897644c-21.4359283,37.1281128-61.0511475,59.9999695-103.9230042,60"/>
        
            <linearGradient id="SVGID_00000087406250813457147340000016349020068421769389_" gradientUnits="userSpaceOnUse" x1="-155.4997864" y1="553.9348145" x2="-156.4997864" y2="554.9348145" gradientTransform="matrix(103.9229965 0 0 -60 16281.1660156 33505.2265625)">
            <stop  offset="0" style="stop-color:#E5251E"/>
            <stop  offset="1" style="stop-color:#9B134D"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_00000087406250813457147340000016349020068421769389_)" stroke-width="5" d="
            M138.8976288,258.897644c-42.8718491-0.0000305-82.4870605-22.8718872-103.9229889-60"/>
        
            <linearGradient id="SVGID_00000139976144062006628720000013983753953570931840_" gradientUnits="userSpaceOnUse" x1="-149.0865936" y1="556.5291138" x2="-149.0865936" y2="557.5291138" gradientTransform="matrix(16.076952 0 0 -120 2408.2407227 66982.390625)">
            <stop  offset="0" style="stop-color:#9B134D"/>
            <stop  offset="1" style="stop-color:#7D1526"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_00000139976144062006628720000013983753953570931840_)" stroke-width="5" d="
            M34.9746323,198.897644c-21.435936-37.1281281-21.435936-82.8718796,0-120.0000076"/>
        
            <linearGradient id="SVGID_00000165210933497967896270000001121849787090825106_" gradientUnits="userSpaceOnUse" x1="-156.4997864" y1="554.276123" x2="-155.4997864" y2="555.276123" gradientTransform="matrix(103.9230042 0 0 -60 16281.1669922 33325.2265625)">
            <stop  offset="0" style="stop-color:#7D1526"/>
            <stop  offset="1" style="stop-color:#5CB130"/>
        </linearGradient>
        <path fill="none" stroke="url(#SVGID_00000165210933497967896270000001121849787090825106_)" stroke-width="5" d="
            M34.9746323,78.8976364c21.4359245-37.1281128,61.0511475-59.9999809,103.9229965-60"/>
    </g>
</g>
<g id="Layer_1">
    <g id="percentage">
        
            <path id="percent_00000032606264135215483020000005541880329144611487_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M138.8975983,18.9037132c2.5035095,0.0003986,5.015625,0.0722179,7.5348663,0.2307148"/>
        
            <path id="percent_00000028306369609926755810000017306730045105677219_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M146.4320831,19.1404915c2.4985504,0.1575947,5.0011902,0.3870087,7.5055084,0.7033787"/>
        
            <path id="percent_00000082361906806784941970000002028381295781626284_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M153.9368286,19.8498974c2.4837189,0.3141689,4.9670105,0.7002716,7.4465332,1.1732655"/>
        
            <path id="percent_00000138539961731828049390000013280001327052129686_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M161.3822174,21.029129c2.4590912,0.4695034,4.9132538,1.0107708,7.3581848,1.6385212"/>
        
            <path id="percent_00000065036175195749828250000017498148216197095590_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M168.7388763,22.6735344c2.4247589,0.6229839,4.8400879,1.3172817,7.2407684,2.0973129"/>
        
            <path id="percent_00000119116810928129124040000012881680177546199181_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M175.9777679,24.7766247c2.3808594,0.7740059,4.747818,1.6185913,7.0947876,2.547823"/>
        
            <path id="percent_00000074422924677370162630000007097224799103991992_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M183.0703125,27.3300953c2.3275604,0.9219761,4.6368256,1.9135189,6.9208069,2.9882832"/>
        
            <path id="percent_00000178883418153782545710000000098690301336231076_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M189.9885406,30.3238754c2.2650757,1.0663033,4.5075073,2.2008896,6.7195129,3.4169464"/>
        
            <path id="percent_00000086682612977677562320000017203198116736105388_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M196.7051239,33.7461433c2.1936493,1.2064247,4.3604279,2.4795761,6.4916992,3.8321266"/>
        
            <path id="percent_00000052070989569751716190000012502694854833929856_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M203.193573,37.5833969c2.1135712,1.3417854,4.1961212,2.7484779,6.238266,4.2321854"/>
        
            <path id="percent_00000060006693123788471530000004814622102259509684_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M209.4282684,41.8204956c2.0251465,1.4718475,4.015274,3.0065269,5.9602203,4.6155319"/>
        
            <path id="percent_00000035506236246205691270000010670775571977134516_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M215.384613,46.4407082c1.9287415,1.5961037,3.818573,3.2527199,5.6586609,4.9806747"/>
        
            <path id="percent_00000021834723034317312760000002303020510782178470_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M221.0391083,51.425808c1.824707,1.7140617,3.6067963,3.4860687,5.3347473,5.3261566"/>
        
            <path id="percent_00000006709561094081735420000002392057266482324352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M226.3694153,56.7561188c1.7134857,1.8252525,3.3807831,3.7056618,4.9897919,5.6506157"/>
        
            <path id="percent_00000168106616366021304380000007440336931191248563_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M231.3545227,62.4106064c1.5954895,1.929245,3.1414337,3.9106293,4.6251373,5.952774"/>
        
            <path id="percent_00000154403508051192442000000000638716018432371082_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M235.9747467,68.366951c1.4712067,2.0256195,2.889679,4.1001663,4.2422333,6.2314453"/>
        
            <path id="percent_00000147179810747847188290000001428271484682055339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M240.2118378,74.6016464c1.3411102,2.1139984,2.6265259,4.2735214,3.8425903,6.485527"/>
        
            <path id="percent_00000131327499497543205100000014632942614648512180_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M244.0491028,81.0900955c1.205719,2.1940308,2.3529968,4.4300079,3.4277649,6.7139969"/>
        
            <path id="percent_00000172432103422618070720000011453093990830625721_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M247.4713745,87.8066788c1.0655823,2.2654114,2.0702057,4.5690155,2.9994354,6.9159851"/>
        
            <path id="percent_00000135677098630294360220000003873538208549038266_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M250.4651489,94.7248993c0.9212341,2.3278503,1.7792358,4.6899872,2.5592651,7.0906677"/>
        
            <path id="percent_00000158020922039739367080000004200218855343618215_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M253.018631,101.8174438c0.7732544,2.3811035,1.4812317,4.79245,2.1089783,7.237381"/>
        
            <path id="percent_00000026122967701204520070000015876310050288714924_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M255.1217194,109.0563278c0.6222229,2.4249573,1.1773834,4.8759995,1.6503754,7.3555222"/>
        
            <path id="percent_00000152962838819067721290000009347820478988735362_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M256.7661438,116.4129868c0.4687195,2.4592361,0.8688965,4.9403076,1.1852417,7.4446335"/>
        
            <path id="percent_00000016058514067193110380000006409792379723118509_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M257.9453735,123.8583755c0.313385,2.4838181,0.5569763,4.9851151,0.7154846,7.5043716"/>
        
            <path id="percent_00000140000107912993020050000017191904555679128495_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M258.6547852,131.3631287c0.1567993,2.4985962,0.2428589,5.0102539,0.2428589,7.5344849"/>
        
            <path id="percent_00000134230670064259057810000014412453315966410635_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M258.891571,138.8975983c-0.0003967,2.5035095-0.0722351,5.015625-0.2307129,7.5348663"/>
        
            <path id="percent_00000039847019014144571950000016927207652635820934_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M258.6547852,146.4320831c-0.1575928,2.4985504-0.3870239,5.0011902-0.7033691,7.5055084"/>
        
            <path id="percent_00000111177965635098942620000007839177954551259531_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M257.9453735,153.9368286c-0.3141785,2.4837189-0.7002563,4.9670105-1.1732483,7.4465332"/>
        
            <path id="percent_00000158743007099903390380000014738849805299663024_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M256.7661438,161.3822174c-0.4695129,2.4590912-1.0107727,4.9132538-1.6385193,7.3581848"/>
        
            <path id="percent_00000028309406856002023020000006322882414327936641_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M255.1217346,168.7388763c-0.6229706,2.4247589-1.317276,4.8400879-2.0973053,7.2407684"/>
        
            <path id="percent_00000003821784454078841200000017734589216049303965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M253.0186462,175.9777679c-0.7740021,2.3808594-1.6185913,4.747818-2.547821,7.0947876"/>
        
            <path id="percent_00000030459373252026938060000003091514103304890552_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M250.4651794,183.0703125c-0.9219818,2.3275604-1.9135132,4.6368256-2.9882812,6.9208069"/>
        
            <path id="percent_00000137097836164980653750000007511925382980972474_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M247.471405,189.9885406c-1.0663147,2.2650757-2.2008972,4.5075073-3.4169464,6.7195129"/>
        
            <path id="percent_00000120549228966608569990000015797767285371552671_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M244.0491333,196.7051239c-1.2064209,2.1936493-2.4795837,4.3604279-3.8321228,6.4916992"/>
        
            <path id="percent_00000124148718096123232570000014324110734300873868_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M240.2118835,203.193573c-1.3417969,2.1135712-2.7484894,4.1961212-4.232193,6.238266"/>
        
            <path id="percent_00000170263932946661298140000016757709090411024010_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M235.9747772,209.4282684c-1.4718475,2.0251465-3.0065308,4.015274-4.6155243,5.9602203"/>
        
            <path id="percent_00000076561799036968615190000011673503828065269145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M231.3545685,215.384613c-1.5960999,1.9287415-3.2527161,3.818573-4.9806671,5.6586609"/>
        
            <path id="percent_00000083788385693069256220000017438794050104042130_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M226.3694611,221.0391083c-1.7140503,1.824707-3.4860687,3.6067963-5.3261414,5.3347473"/>
        
            <path id="percent_00000058568819026925842230000011573971903342706051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M221.0391541,226.3694153c-1.8252563,1.7134857-3.705658,3.3807831-5.6506195,4.9897919"/>
        
            <path id="percent_00000170248015312475403250000009327155199174933140_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M215.3846741,231.3545227c-1.929245,1.5954895-3.9106293,3.1414337-5.952774,4.6251373"/>
        
            <path id="percent_00000118391314128817817130000001054673944705474946_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M209.4283295,235.9747467c-2.0256195,1.4712067-4.100174,2.889679-6.2314453,4.2422333"/>
        
            <path id="percent_00000030481540633374888260000006401156712534483352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M203.193634,240.2118378c-2.1139984,1.3411102-4.2735291,2.6265259-6.4855347,3.8425903"/>
        
            <path id="percent_00000147205492172703277950000000310650880793352115_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M196.7051849,244.0491028c-2.194046,1.205719-4.4300079,2.3529968-6.7140045,3.4277649"/>
        
            <path id="percent_00000093880020027073771160000003256237277600216455_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M189.9886017,247.4713745c-2.2654114,1.0655823-4.5690155,2.0702057-6.9159851,2.9994354"/>
        
            <path id="percent_00000075147182715102416800000012797925539604231085_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M183.0703735,250.4651489c-2.3278503,0.9212341-4.6899872,1.7792358-7.0906677,2.5592651"/>
        
            <path id="percent_00000083797828779468483540000014297191505650432948_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M175.977829,253.018631c-2.3811035,0.7732544-4.79245,1.4812317-7.237381,2.1089783"/>
        
            <path id="percent_00000154400065520716691750000012560135372897606272_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M168.7389526,255.1217194c-2.4249573,0.6222229-4.8760071,1.1773834-7.3555298,1.6503754"/>
        
            <path id="percent_00000049922155415035982430000009480219739568052911_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M161.3822937,256.7661438c-2.4592438,0.4687195-4.9403076,0.8688965-7.4446411,1.1852417"/>
        
            <path id="percent_00000162320235452610224130000005560025261011403174_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M153.9369049,257.9453735c-2.4838257,0.313385-4.9851227,0.5569763-7.5043793,0.7154846"/>
        
            <path id="percent_00000091005145132581292730000010488787202275794842_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M146.4321594,258.6547852c-2.4985962,0.1567993-5.0102539,0.2428589-7.5344849,0.2428589"/>
        
            <path id="percent_00000103257077072244403140000003000387872561340295_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M138.8976746,258.891571c-2.5035095-0.0003967-5.015625-0.0722351-7.5348663-0.2307129"/>
        
            <path id="percent_00000111158083606585183660000007892379069054209716_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M131.3631897,258.6547852c-2.4985504-0.1575928-5.0011826-0.3870239-7.5055084-0.7033691"/>
        
            <path id="percent_00000023242655163615003150000001829109110270087815_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M123.8584442,257.9453735c-2.4837189-0.3141785-4.9670181-0.7002563-7.4465332-1.1732483"/>
        
            <path id="percent_00000022518474140820104510000003271974032260690093_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M116.4130554,256.7661438c-2.4590988-0.4695129-4.9132462-1.0107727-7.3581772-1.6385193"/>
        
            <path id="percent_00000093877533468282143940000005000384021352938391_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M109.0563965,255.1217346c-2.4247589-0.6229706-4.8400803-1.317276-7.2407684-2.0973053"/>
        
            <path id="percent_00000176745329974692471870000016560602430003898287_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M101.8175125,253.0186462c-2.3808594-0.7740021-4.7478256-1.6185913-7.0947952-2.547821"/>
        
            <path id="percent_00000048478376000292398490000002361039895884042116_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M94.7249603,250.4651794c-2.3275604-0.9219818-4.6368179-1.9135132-6.9208069-2.9882812"/>
        
            <path id="percent_00000063611903572415768630000017217627879398935937_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M87.8067398,247.471405c-2.2650757-1.0663147-4.507515-2.2008972-6.7195129-3.4169464"/>
        
            <path id="percent_00000169540952752603874400000017713679558481356965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M81.0901566,244.0491333c-2.1936569-1.2064209-4.3604279-2.4795837-6.4917068-3.8321228"/>
        
            <path id="percent_00000103252877608182980650000012266219846621553568_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M74.6017075,240.2118835c-2.1135712-1.3417969-4.1961288-2.7484894-6.2382736-4.232193"/>
        
            <path id="percent_00000018229762937518236790000010214476917681663419_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M68.3670044,235.9747772c-2.0251465-1.4718475-4.0152664-3.0065308-5.9602203-4.6155243"/>
        
            <path id="percent_00000049198495772670228700000015892206198793261730_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M62.4106598,231.3545685c-1.9287376-1.5960999-3.8185692-3.2527161-5.6586533-4.9806671"/>
        
            <path id="percent_00000163061696861974236580000012231850179018578051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M56.7561684,226.3694611c-1.824707-1.7140503-3.6067886-3.4860687-5.3347435-5.3261414"/>
        
            <path id="percent_00000103971948649784591570000016617486256704553645_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M51.4258537,221.0391541c-1.7134781-1.8252563-3.3807793-3.705658-4.9897842-5.6506195"/>
        
            <path id="percent_00000018235409277527290320000007366834638086925983_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M46.4407539,215.3846741c-1.5954933-1.929245-3.1414299-3.9106293-4.6251373-5.952774"/>
        
            <path id="percent_00000094617257770944187940000011362927962401918120_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M41.8205338,209.4283295c-1.4712029-2.0256195-2.889679-4.100174-4.2422295-6.2314453"/>
        
            <path id="percent_00000164515347713346567520000006243065964209341855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M37.5834351,203.193634c-1.3411102-2.1139984-2.6265259-4.2735291-3.8425827-6.4855347"/>
        
            <path id="percent_00000059999884343081136830000001429886033743376783_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M33.7461777,196.7051849c-1.2057266-2.194046-2.3530083-4.4300079-3.4277725-6.7140045"/>
        
            <path id="percent_00000096755803173383212970000009641632149746558385_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M30.323904,189.9886017c-1.0655823-2.2654114-2.0702019-4.5690155-2.9994335-6.9159851"/>
        
            <path id="percent_00000124854919331479801570000008131814051369634944_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M27.330122,183.0703735c-0.9212341-2.3278503-1.7792263-4.6899872-2.5592575-7.0906677"/>
        
            <path id="percent_00000138541041412509839910000015910376640192217490_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M24.7766457,175.977829c-0.7732487-2.3811035-1.4812298-4.79245-2.1089802-7.237381"/>
        
            <path id="percent_00000098903297908647029640000018031008645145274505_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M22.6735516,168.7389526c-0.6222115-2.4249573-1.1773853-4.8760071-1.6503773-7.3555298"/>
        
            <path id="percent_00000183963300764045405510000011092879603375097021_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M21.0291424,161.3822937c-0.4687195-2.4592438-0.8688946-4.9403076-1.1852646-7.4446411"/>
        
            <path id="percent_00000093885803657794915140000009980523458620072098_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M19.8499069,153.9369049c-0.3133793-2.4838257-0.5569763-4.9851227-0.7154751-7.5043793"/>
        
            <path id="percent_00000117652736697560549580000011023614209648241292_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M19.1404972,146.4321594c-0.1567993-2.4985962-0.2428589-5.0102539-0.2428589-7.5344849"/>
        
            <path id="percent_00000181770529799759843720000003459230667421039798_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M18.9037132,138.8976746c0.0003986-2.5035095,0.0722179-5.015625,0.2307148-7.5348663"/>
        
            <path id="percent_00000105391457419526061150000017621335826939528592_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M19.1404915,131.3631897c0.1575947-2.4985504,0.3870087-5.0011826,0.7033787-7.5055084"/>
        
            <path id="percent_00000070834920069069246510000014593432956475295678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M19.8498974,123.8584442c0.3141689-2.4837189,0.7002716-4.9670105,1.1732655-7.4465332"/>
        
            <path id="percent_00000145780121849657739760000002789697054560922549_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M21.029129,116.4130554c0.4695034-2.4590988,1.0107708-4.9132462,1.6385212-7.3581772"/>
        
            <path id="percent_00000064350827270053089010000008395732268159986063_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M22.6735344,109.0563965c0.6229839-2.4247589,1.3172817-4.8400803,2.0973129-7.2407684"/>
        
            <path id="percent_00000156570514578808900040000011510914257191242909_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M24.7766247,101.8175125c0.7740059-2.3808594,1.6185913-4.7478256,2.547823-7.0947952"/>
        
            <path id="percent_00000111895702114263549760000016354777988337565339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M27.3300953,94.7249603c0.9219742-2.3275604,1.913517-4.6368179,2.9882832-6.9208069"/>
        
            <path id="percent_00000091693992784113435900000002782527186721650343_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M30.3238754,87.8067398c1.0663033-2.2650757,2.2008896-4.507515,3.4169464-6.7195129"/>
        
            <path id="percent_00000127027784293992435210000010206990156284212921_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M33.7461433,81.0901566c1.2064247-2.1936569,2.4795761-4.3604279,3.8321266-6.4917068"/>
        
            <path id="percent_00000029752578365103483660000000720109475777914262_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M37.5833969,74.6017075c1.3417854-2.1135712,2.7484779-4.1961288,4.2321854-6.2382736"/>
        
            <path id="percent_00000133527447926399569810000011232003768216319417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M41.8204956,68.3670044c1.4718475-2.0251465,3.0065269-4.0152664,4.6155319-5.9602203"/>
        
            <path id="percent_00000165925257800574240700000016152351988347906738_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M46.4407082,62.4106598c1.5961037-1.9287376,3.2527199-3.8185692,4.9806747-5.6586533"/>
        
            <path id="percent_00000149348233867586492550000003341265119176423314_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M51.425808,56.7561684c1.7140617-1.824707,3.4860687-3.6067886,5.3261566-5.3347435"/>
        
            <path id="percent_00000026142351716086889880000006482746373313516417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M56.7561188,51.4258537c1.8252525-1.7134781,3.7056618-3.3807793,5.6506157-4.9897842"/>
        
            <path id="percent_00000013902945361986194870000000093217682497202107_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M62.4106064,46.4407539c1.929245-1.5954933,3.9106293-3.1414299,5.952774-4.6251373"/>
        
            <path id="percent_00000106128325588063384870000008938161577721158079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M68.366951,41.8205338c2.0256195-1.4712029,4.1001663-2.889679,6.2314453-4.2422295"/>
        
            <path id="percent_00000018205018634590916450000001348648361061842613_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M74.6016464,37.5834351c2.1139984-1.3411102,4.2735214-2.6265259,6.485527-3.8425827"/>
        
            <path id="percent_00000147937565868708783540000003214215170601951145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M81.0900955,33.7461777c2.1940308-1.2057266,4.4300079-2.3530083,6.7139969-3.4277725"/>
        
            <path id="percent_00000012458452623860852590000015295768040977373079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M87.8066788,30.323904c2.2654114-1.0655823,4.5690155-2.0702019,6.9159851-2.9994335"/>
        
            <path id="percent_00000057832004969570609980000012330358831092775855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M94.7248993,27.330122c2.3278503-0.9212341,4.6899872-1.7792263,7.0906677-2.5592575"/>
        
            <path id="percent_00000078006224767329465430000007054961664540901035_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M101.8174438,24.7766457c2.3811035-0.7732487,4.79245-1.4812298,7.237381-2.1089802"/>
        
            <path id="percent_00000047057945113382245830000007134537769256595896_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M109.0563278,22.6735516c2.4249573-0.6222115,4.8759995-1.1773853,7.3555222-1.6503773"/>
        
            <path id="percent_00000134941977547941051570000011425067305948609678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M116.4129868,21.0291424c2.4592361-0.4687195,4.9403076-0.8688946,7.4446335-1.1852646"/>
        
            <path id="percent_00000159467815995511282350000007405889823836648332_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M123.8583755,19.8499069c2.4838181-0.3133793,4.9851151-0.5569763,7.5043716-0.7154751"/>
        
            <path id="percent_00000023984292376357922240000008516262335734862210_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
            M131.3631287,19.1404972c2.4985962-0.1567993,5.0102539-0.2428589,7.5344849-0.2428589"/>
    </g>
</g>
</svg>

And this is how you show the percentage with Javascript:

const percents = document.querySelectorAll('#percentage path');
const winnerResult = 71;

for (const percent in percents) {
    if (percent < winnerResult) {
        percents[percent].style.display = 'none';
    }
}

Javascript svg circular gradiant

2 Answers2