I want to build a React component that will display rating scores to a decimal point in tenths, like the attached screenshot. However, if the score is, for example, 4.2 I would like to have the fifth circle have a 20% fill, so it can accurately show the rating to a decimal point. How can I get that done efficiently? I tried using an svg and having it mask over a span that would have the correct width and background color (4.2 would be 84%), but it seemed like there might be a better solution. Am I wrong? What would be the best way to get this done?
