Best way to programmatically create dial images?

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.

开发者_开发知识库

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:

The functionality will be the same, but as you can see they're different dimensions.

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.

Any help or guidance would be greatly appreciated.

---

Raphaël doesn't do non-rectangular clipping AFAIK, even though SVG supports that.

This clip-path animation might provide a bit of help for what you want to do.