title: Best way to programmatically create dial images?
body: <p>I'm working on a website that uses a lot of different sized and styled dials. These are used as progress indicators, so the more filled a dial is, the closer to 100% complete that item is.</p>
  
  <p>I'm looking for a cross-browser, abstract solution so I can use the same solution across the different-styled dials. I'd use Google's Charts API, but unfortunately its dials don't offer the degree of customization needed. For an example, here are a handful of the images:</p>
  
  <p><img src="https://i.stack.imgur.com/2xBIR.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/7WgU0.png" alt="enter image description here"></p>
  
  <p>The functionality will be the same, but as you can see they're different dimensions.</p>
  
  <p>I did try a solution with the Raphaël JavaScript library, but couldn't find a way to mask the complete image to show segments from 0 to 100%. The default image is grey, the complete image is the green ones you see above. I need to show values between 0 and 100.</p>
  
  <p>Any help or guidance would be greatly appreciated.</p>