I'm wishing to use a similar idea to the yelp rating system and using my own svg images to create the desired effect, however I wouldnt mind boucing the idea off before i begin the process.
Here is the desired effect : https://vid.me/36iw
These are my svg icons:
Would i do the following:
- Create exact copy of svg in a lighter shade
- Create 6 versions
a - No rating (5 light yellow)
b - 1 rating (1 bright yellow, 4 lighter yellow)
c - 2 rating (2 bright yellow, 3 lighter yellow)
d - 3 rating (3 bright yellow, 2 lighter yello)
e - 4 rating (4 bright yellow, 1 lighter yellow)
f - 5 rating (5 bright yellow)
- On hover appear all bright yellow
- Create click interaction on desired rating by showing the 1/6 versions.