Concentric colored rings in Leaflet. How to implement?

Question

Angular

Task: draw concentric rings in the leaflet, adjacent to each other. When hovering (mouseover) on the ring, its handler will hang, which, among other things, changes the transparency (from 0.8 to 0.5). That is why it is impossible to use circle() inserted into each other - when the transparency of the outer changes, the transparency of all changes (and circles of different colors plus everything).
I know it can be done. How to do it? How to set a ring with r1 and r2 (external/internal radius), so that it would be a polygon?