SVG curve progress demo

by Stalk

HTML

<svg viewBox="0 -30 600 200">
  <path d="M13.7243948,73.2793765 C86.8424111,24.4264588 173.865999,1.73468666e-15 274.795158,0 C375.724318,0 462.747906,24.4264588 535.865922,73.2793765" id="myArc" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
</svg>




<progress id="control" max="100" value="47"></progress>

CSS

svg {
  width: 100%;
}
#myArc {
  fill: none;
  stroke-dasharray: 58% 200%;
}

JavaScript

control.addEventListener('mousemove', function (evt){
  var width = evt.target.offsetWidth
  this.value = evt.offsetX / width * 100
  myArc.style.strokeDasharray = this.value * 1.24 + '% 200%'
})