Rating stars on svg

Good day! wanted to know how to fix svg rating issue. 1) Filling the stroke with a different color than specified in the styles 2) Clipping stroke along with the star 3) The offset of the gradient is different from the example with 5 stars https://codepen.io/Mister-Eighth/pen/KKGgPPp
2 Replies
Kevin Powell
Kevin Powell•2y ago
The issue is the gradient is following the width. there might be a more elegant solution out there from people who know SVGs better than me, but a simple clip-path should work 🤷 Here is a basic example where it's pretty manual: https://codepen.io/kevinpowell/pen/BaqLaxd?editors=1100 Clip paths are a bit hard to read though, so we can make it a little more clear by using a custom property: https://codepen.io/kevinpowell/pen/OJBRJwj?editors=1100 And if we're using custom properties, then we might as well just leverage JS so we never have to do the math ourselves: https://codepen.io/kevinpowell/pen/MWPjWzZ (there could be a non-JS solution to this last option one day, but at the moment, we'd need it if you want to go that route)
Eighth
Eighth•2y ago
Thank you so much Kevin. Didn't expect a response from you, pleasantly surprised. Thank you for your support, I sincerely admire you and your creativity and skill. I wish you good health and further success in your business)
Want results from more Discord servers?
Add your server