0

I have a SVG that contains two polygons. I want to animate the first polygon from start to end and animate the second polygon after that. The animation will work like a fill.

I want to use stroke-dasharray and css keyframes only.

I am providing a pen if you want to work on it. https://codepen.io/anon/pen/byVpjM

<svg height="600" width="800">
   <polygon class="animateFirst1" points="60 548,171 548,170 266,300 345,297 273,293 213,113 67,54 68"/>
   <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
</svg>

So the output I am looking for is, animation starts from the bottom left of M and ends at the bottom right. Any help will be much appreciated.

Muktadir Anzan
  • 81
  • 2
  • 7
  • What have you tried so far? Following the tips in an article like [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) where did you get stuck? – feeela May 08 '19 at 10:15

2 Answers2

1

Polygon with dash animation effetcs the border like this (I only implemented the first half). Is it what you wanted to achieve?

@keyframes dash {
  to {
    stroke-dashoffset: 10;
  }
}

svg {
  width: 200px;
}

.animateFirst1 {
  stroke: red;
  stroke-width: 17;
  stroke-dasharray: 1450;
  stroke-dashoffset: 1450;
  animation: dash 2s linear forwards;
}
 <svg viewBox="0 0 600 800">
  <polygon class="animateFirst1" points="293 213,113 67,54 68,60 548, 171 548, 170 266,300 345"/>
</svg>
gazdagergo
  • 6,187
  • 1
  • 31
  • 45
1

I think this is what you want. However you would have to rethink the way you draw the polygons.

I¡m using the polygons as a <clipPath> to cut a very thick path stroke.

svg{border:1px solid;width:90vh}
path{fill:none;}
polygon{fill:none;stroke:black;}

#thePath{stroke-dasharray:1261.554931640625;stroke-dashoffset:1261.554931640625;
animation: dash 5s linear forwards;}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg viewBox="0 0 600 800">
   <defs>
             <clipPath id="clip" >
               <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
            </clipPath>
        </defs>
                   
   <path id="thePath" stroke="gold" d="M110,550L114,155L296,280 450,140V555" stroke-width="140" style="clip-path:url(#clip)"  />
   
   <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
   
</svg>
enxaneta
  • 31,608
  • 5
  • 29
  • 42