CODEWITHSUNDEEP
htmlcssanimationsvg
Saransh
Saransh

Reputation: 147

Not able to animate SVG the way I want

I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.

Problem:

I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.

I want to do this inside a webpage so I need help regarding that.

Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.

enter image description here

Upvotes: 1

Views: 89

Answers (1)

cjohndesign
cjohndesign

Reputation: 308

I would try https://rive.app/

As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!

Upvotes: 1

Related Questions