CSS or jQuery to animate SVG

jQuery or CSS to animate a lightening bolt.

I have an SVG that I would like to animate.  I want to fill it from top to bottom, so it is like a lightening bolt.  I know there are ways to use javascript to fill it but I have NO IDEA where to start.

The following is the SVG I would like to fill from top to bottom.
<svg version="1.1" id="bolt_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                                         viewBox="0 0 600 612" style="enable-background:new 0 0 600 612;" xml:space="preserve">
                                                                <style type="text/css">
                                                                    .bolt_st0{opacity:0;fill:#FFFFFF;}
                                                                    .bolt_st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D42229;}
                                                                    .bolt_st2{fill:none;}
                                                                </style>
                                                                <rect x="154.4" y="41" class="bolt_st0" width="276" height="530"/>
                                                                <polygon class="bolt_st1" points="192,569.5 430.2,270.9 321.2,253.1 415.3,41.1 155.2,322.3 263.2,345.6 "/>
                                                                <rect x="154.4" y="41" class="bolt_st2" width="276" height="530"/>
                                                                </svg>   

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
 
Brian DayhoffSenior Full Stack DeveloperCommented:
There's a good basic overview on how to approach this here:

https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

And the official specification for doing anything complex here:

https://www.w3.org/TR/filter-effects/

Custom filters require a pretty complex knowledge of math and color theory to pull of correctly. I would start off with something simple as proof of concept, and then build up layers that can be applied together to achieve the final effect you are looking for. If you do not have a considerable amount of time to implement a custom solution, poking around github for a library to handle this for you is pragmatic.
0
 
Dave BaldwinFixer of ProblemsCommented:
If you only are going to do it once, this web site may be what you need:  https://www.svgator.com/
0
 
rgranlundAuthor Commented:
No, I need to fill the SVG (Polygon) from top to bottom
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.