title: Custom shape progress bar
body: <p>I'm struggling to implement a custom progress bar for a website. This is the shape it's supposed to have:</p>
  
  <p><img src="https://i.stack.imgur.com/5MmlV.png" alt="Progress bar with nothing selected"></p>
  
  <p>When the user selects a circle, I want the line (and only the line, not the circles) to fill with a different color until it reaches that circle, and finally that red dot should appear in the middle, having this as a final result if the user clicked the third circle:</p>
  
  <p><img src="https://i.stack.imgur.com/Ps51p.png" alt="Progress bar with item 3 selected and path highlighted"></p>
  
  <p>I have no idea of what might be the best, simpler approach to this. I've tried some pure CSS, jQuery and JavaScript solutions online but none can recreate this effect. Should I have two images and progressively overlay them until I reach the clicked dot only? Should I forget images entirely and try to recreate the shape with CSS or an SVG and change the color of a certain section?</p>
  
  <p>I know usually questions here have code, but I can't show any because I've no idea of what approach to take and hours of research online led to an infinite number of solutions that don't apply to my case.</p>
  
  <p>Thanks in advance.</p>