title: SVG gauge meter with dynamic strokes
body: <p>I am trying to build an SVG something similar to:
  <a href="https://i.stack.imgur.com/6aXah.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6aXah.png" alt="enter image description here" /></a></p>
  <p>The strokes are completely dynamic, as they come from an API. I want to place the strokes at the points received (as array of percentage values). Need not be in order and the distance between 2 strokes need not be equal</p>
  <p>I am trying with something like below but not able to come up with a logic for the placement of strokes. I tried to follow the answer here: <a href="https://stackoverflow.com/a/66076805/6456247">https://stackoverflow.com/a/66076805/6456247</a> but the distance between strokes here are equal. In my scenario, they are not consistent.</p>
  <p>Fiddle Link: <a href="https://jsfiddle.net/puq8v594/2/" rel="nofollow noreferrer">https://jsfiddle.net/puq8v594/2/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let divisionsElement = document.getElementById('divisions');
  let length = parseInt(divisionsElement.getAttribute("r")) * Math.PI;
  let divisionsArray = [20,30,80,90]; //stroke at 20%, 30%,80%,90% position
  let METER_DIVISIONS_GAP = 0.2;
  
  divisionsArray.map(ele =&gt; {
      setupPath(ele);
  })
  
  
  function setupPath(val) {
      divisionsElement.setAttribute("stroke-dasharray", val + ' ' +METER_DIVISIONS_GAP);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>circle {
    fill: none;
  }
  .circle-back {
    stroke: #F8F6F0;
    stroke-width:9px;
  }
  
  .circle-fill {
    stroke: grey;
    stroke-width: 10px;
  }
  
  .circle-progress {
    stroke: blue;
    stroke-width:9px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 126 126" preserveAspectRatio="xMinYMin meet"&gt;
  
    &lt;clipPath id="cut-off"&gt;
      &lt;rect x="0" y="0" width="100%" height="50" /&gt;
    &lt;/clipPath&gt;
  
    &lt;clipPath id="progress-percent"&gt;
      &lt;path x="0" y="0" width="12%" height="50" /&gt;
    &lt;/clipPath&gt;
    
    &lt;g&gt;
      &lt;circle r="35%" cx="40%" cy="40%" class="circle-fill" clip-path="url(#cut-off)" /&gt;
  
      &lt;circle id="divisions" r="35%" cx="40%" cy="40%" class="circle-back" clip-path="url(#cut-off)" 
      stroke-dasharray="20 0.5" stroke-dashoffset="25" /&gt;
  
      &lt;circle r="35%" cx="40%" cy="40%" class="circle-progress" clip-path="url(#progress-percent)" /&gt;
    &lt;/g&gt;
    
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>-----------EDIT------------</strong></p>
  <p>For somebody who wants to implement this with support to IE, I was able to implement it by making some changes to the code by Michael.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [10,20,10,10,25,25];
  var dataSum = 0;
  for (let i = 0; i &lt; data.length - 1; i++) { dataSum += data[i]; }
  
  
  
  var drawArray = "";
  var indexOfFill = 2;
  var arcPath = document.getElementById("meter-back");
  var filledPath = document.getElementById("meter-fill");
  
  var totalLength = arcPath.getTotalLength();
      function drawPath() {
  
    // Draw the background strokes
    let test='';
     for (i = 0; i &lt; data.length; i++) {
       let barLen = ((data[i]) * totalLength) / 100;
       test = test + ((barLen) - (0.2 * (dataSum / 100)) + " " + 0.2 * (dataSum / 100) + " ")
    }
    arcPath.setAttribute("stroke-dasharray", test);
    animate(filledPath, totalLength, 0,50);
    }drawPath();
    
    
  function animate(el,length,end,percentage) {
      el.style.visibility = 'visible';
      if (end &lt;= percentage) {
            el.style.strokeOpacity = 5;
            let gap = 100 - end;
            let offset = 100;
            el.style.strokeDasharray = ((end / 100) * length) + ' ' + ((gap / 100) * length);
            el.style.strokeDashoffset = (offset / 100) * length;
  
            animate(el, length, ++end, percentage);
          }
  
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="100%" height="600px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"&gt;
    &lt;defs&gt;
      &lt;filter id="outline" y="-50%" height="200%"&gt;
        &lt;feMorphology operator="erode" radius="0.2" /&gt;
        &lt;feComposite operator="out" in="SourceGraphic" result="outline" /&gt;
        &lt;feFlood flood-color="grey" /&gt;
        &lt;feComposite operator="in" in2="outline" /&gt;
        &lt;feComposite operator="atop" in2="SourceGraphic" /&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
  
    &lt;g filter="url(#outline)"&gt;
      &lt;path fill="none" stroke-dasharray="" stroke-width="20" stroke="grey" d="M30 100 A 40 40 0 0 1 170 100" /&gt;
      &lt;path id="meter-back" fill="none" stroke-dasharray="" stroke-width="20" stroke="white" d="M30 100 A 40 40 0 0 1 170 100" /&gt;
      &lt;path id="meter-fill" fill="none" stroke-dasharray="" stroke="rgba(128,128,128,0.5)" stroke-width="20" d="M30 100 A 40 40 0 0 1 170 100" style="visibility: hidden;" &gt;&lt;/path&gt;
    &lt;/g&gt;
    
  
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>