How to animate a SVG polygon to fill?

Question

I have a SVG letter (A) that consists of two polygon and a rectangle. I want to animate them in a way that the first polygon grows to visible and then the second one. After that, the rectangle will grow to be visible. Before the start of the animation, the SVG will not be visible.

I have tried keyframe strokes but as they are not path based but points of polygon, it didn't work.

<svg height="600" width="800">
  <polygon  points="34 537,150 536,289 130,314 53,196 51"/>
    <animate attributeName="points" dur="5s" fill="freeze"  />
  
   <polygon  points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
   <rect x="120" y="320"  stroke-miterlimit="10" width="270" height="120"/>
 </svg>

Here is a pen if you want to work on it : https://codepen.io/anon/pen/vMxXaP

Answer 1

You can still draw the (A) letter by using polygons with stroke instead of fill. The following example uses two keyframe animations on stroke-dasharray to draw the A letter in two steps :

1. First step for the top left and top right line (first polygon element in the svg)
2. Second step for the horizontal line closing the A (second polygon in the svg element)

.letter {
  width:200px;height:auto;
  stroke-width:2.5;
  stroke:#000;
  fill:none;
  stroke-dasharray: 0 24;
}
.animateFirst { animation: 0.5s animateFirst ease-in forwards; }
.animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; }

@keyframes animateFirst {
  to { stroke-dasharray: 24 24; }
}
@keyframes animateSecond {
  to { stroke-dasharray: 6 24; }
}

<svg class="letter" viewbox="0 0 12 10">
  <polygon class="animateFirst" points="1,11.5 6,0 11,11.5" />
  <polygon class="animateSecond" points="3,6.5 9,6.5" />  
</svg>