CODEWITHSUNDEEP
cssanimationsvg
hoon3024
hoon3024

Reputation: 27

How to animate a polygon SVG to fill?

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.0" id="layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="190px" height="115px"
     viewBox="0 0 190 115" enable-background="new 0 0 190 115" xml:space="preserve">
        <polygon fill="#FFE033" points="180,22.5 10,22.5 10,0 0,0 0,22.5 0,32.5 10,32.5 180,32.5 180,52.5 10,52.5 0,52.5 0,62.5 
            0,82.5 0,92.5 10,92.5 180,92.5 180,114.999 190,114.999 190,92.5 190,82.5 180,82.5 10,82.5 10,62.5 180,62.5 190,62.5 190,52.5 
            190,32.5 190,22.5"/>    
</svg>

Using this svg, I try to do an animation that goes down like a ladder. How do you implement it using css?

I'm a ulti beginner...

Upvotes: 0

Views: 115

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123418

You could simplify your SVG using a path instead of a polygon and run a CSS animation over the stroke-dasharray property

svg {
   stroke: #ffe033;
   stroke-width: 10px;
   fill: none;
   width: 190px;
   height: 115px;
   stroke-dasharray: 0 660;
   animation: stroke 5s linear 0s 1 forwards;
} 

@keyframes stroke {
   to { stroke-dasharray: 660 660; }
}
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 190 115">

     <path d="M5 0v30H185v30H5v30H185v30" />
</svg>

Upvotes: 2

Related Questions