Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image is being viewed. The filled coins represent completed ranges while the empty ones signify those that have yet to be seen. This concept can be visualized with the 6th circle from the left:
What methods can I use to generate these circle images? Are there any CSS techniques that could achieve this effect, or should I explore HTML5 Canvas for a solution?