I am seeking assistance with adding a "shine" animation to my SVG. I want the animation to only appear within specific parts of the SVG, but I'm uncertain about how to achieve this.
Below is what I have accomplished so far.
The aim is for the white "shine" animation to be visible only within the blue arrow polygons and not visible in the orange background.
Any guidance on this matter would be greatly appreciated! Thank you!
.shine {
background: orange -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
-webkit-background-size: 200%;
-webkit-animation-name: shine;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes shine {
0% {
background-position: 150%
}
100% {
background-position: -50%
}
}<svg class='shine'>
<polygon fill="blue" class='arrow-top' points='37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3'></polygon>
<polygon fill="blue" class='arrow-middle' points='37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7'></polygon>
<polygon fill="blue" class='arrow-bottom' points='37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1'></polygon>
</svg>