title: How do I draw a half circle outline SVG and fill it in with Javascript given a range of data?
body: <p>I've been tasked with trying to build the example shown below. I'm having trouble drawing the curved line and filling it in according to a range of given data. I was trying to do it by using a div within a div but then I realized that there isn't a way to bend the div to look like the example, therefore I think SVGs are the way to go. What are the svg path coordinates to draw this and how do I fill it in with Javascript according to a range of given data? I will be making this a React component which accepts the data through props. I don't need help coding it up in React but I do need help getting this first part started.</p>
  
  <p><img src="https://i.stack.imgur.com/zaphY.png" alt="[Example of what I&#39;m trying to make">]</p>