<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" data-value="40">
  <path class="bg" d="M21.5 114.5c18-16 1-74 49-44s65 48 74 38 61-13 17-39-91-55-83-31-23 43 1 63 40 36 53 46 17 16 27 4" fill="none" stroke="#ccc" stroke-miterlimit="10"/>
  <path class="meter" d="M21.5 114.5c18-16 1-74 49-44s65 48 74 38 61-13 17-39-91-55-83-31-23 43 1 63 40 36 53 46 17 16 27 4" fill="none" stroke="#09c" stroke-dasharray="512" stroke-dashoffset="512" stroke-miterlimit="10"/>
</svg>
body {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

svg path {
  stroke-width: 10px;
  stroke-miterlimit: round;
  transition: stroke-dashoffset 850ms ease-in-out;
}
console.clear();

const meters = document.querySelectorAll('svg[data-value] .meter');

meters.forEach( (path) => {
  // Get the length of the path
  let length = path.getTotalLength();
  // console.log(length) once and hardcode the stroke-dashoffset and stroke-dasharray in the SVG if possible or set it dynamically
  // path.style.strokeDashoffset = length;
  // path.style.strokeDasharray = length;

  // Get the value of the meter
  let value = parseInt(path.parentNode.getAttribute('data-value'));
  // Calculate the percentage of the total length
  let to = length * ((100 - value) / 100);

  // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/
  path.getBoundingClientRect();
  // Set the Offset
  path.style.strokeDashoffset = Math.max(0, to);  
});

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.