(*) See Dev.to post: What web technologies are required to draw a pie-chart in 2021
I learned Web Components by asking loads of questions on StackOverflow.
Now I learn more and more about Web Components,
by answering questions on Stack Overflow.
Last year, in the SVG topic, someone asked how to do a half-star Rating
Like many I started by drawing half star icons.
then realised it is easier to draw all 5 stars
by cutting them out the green foreground.
A gold rectangle behind the green foreground then indicates the value.
For full explanation on how the SVG and Web Component work see:
All the Web Component then has to do is draw double the amount of invisible rectangles to capture the mouse position over the "half-stars".
A fully configurable <star-rating> Web Component:
<star-rating stars=5 rating="3.5" bgcolor="green" nocolor="grey" color="gold"></star-rating>
<star-rating stars=7 rating="50%" bgcolor="rebeccapurple" nocolor="beige" color="goldenrod"></star-rating>
Play with the code, tweak it, break it, mend it again, enhance it, learn!