title: How to draw SVG path for arc in html
body: <p>I am trying to create progress bar in html using SVG like following</p>
  
  <p><img src="https://i.stack.imgur.com/Bh8pT.png" alt="what i expected[1]"></p>
  
  <p>I tried to draw path but it's not working. Here is what I done.</p>
  
  <p><img src="https://i.stack.imgur.com/h7WsD.png" alt="What I could create[2]"></p>
  
  <p>I need to change start and end point of red line same as yellow line/Dark gray line which show in first image. also depends on progress I need to bend progress bar.</p>
  
  <p>I am very new to SVG. I follow below links but not helpful.</p>
  
  <p><a href="https://www.w3.org/TR/SVG/images/paths/arcs02.svg" rel="nofollow noreferrer">https://www.w3.org/TR/SVG/images/paths/arcs02.svg</a>
  Here is my html code</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      
      &lt;svg height="140" width="500"&gt;
       
              &lt;ellipse cx="200" cy="80" rx="150" ry="30" style="fill:none;stroke:purple;stroke-width:6" /&gt;
        &lt;ellipse cx="200" cy="80" rx="150" ry="30" style="fill:none;stroke:green;stroke-width:6" /&gt;  
        &lt;path id = "progress-bar" d="M200 ,50 a150,30 0 1,0 150,30" fill="none" stroke="red" stroke-width="6"/&gt;
       &lt;/svg&gt;
      
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>