I'm trying to make a 5 circle rating system using CSS and HTML only (see below image for what I'd like it to look like), but I'm not sure how to achieve this.
My initial idea was to make 5 circles and then somehow use them as a mask for a background colour that's the complete width of all 5 circles. So the first image has a width of 90% with a background colour of #4a494a , while the second image has a width of 60% and again, a background colour of #4a494a.
These circles are fixed so no interaction shall be needed to paint them.
Does anyone have any ideas on how I might do this?