SVG CSS animation star glittering moving toward 0,0 point

Vote count:

0

I'm trying to animation a svg star with glittering made in css.

The thing is the star moves toward 0,0 position of svg during the animation. I would like the star to stay in position during the animation.

What I'm guessing is that the position of each points that make the star (in path) are not used during the animation.

<svg width="300" height="100" xmlns="http://ift.tt/nvqhV5" xmlns:svg="http://ift.tt/nvqhV5"> <g> <rect fill="#009eff" height="351.7699" width="300.36301" class="color-fill"/> <path class="glittering" fill="#ffcc00" d="m270.88123,28.60792l-7.20074,6.20193l1.02679,9.44777l-8.12354,-4.93181l-8.66808,3.89605l2.18013,-9.24996l-6.38396,-7.03987l9.47093,-0.78498l4.72256,-8.24694l3.67325,8.76482l9.30264,1.94299z"/> </g> </svg>

I made a codepen so that you can see what I mean.

codepen

Can you help me community? Thanks a lot !

asked 1 min ago

user2203299

33

SVG CSS animation star glittering moving toward 0,0 point