You can show an SVG polygon changing shape with SVG’s animate tag.
<polygon points="100,100 0,100 0,0"> <animate to="50,50 0,50 0,0" from="100,100 0,100 0,0" dur="10s" attributeName="points" /> </polygon>
However, you can not animate a shape change to a different number of points.
For instance if you have three points in the
to attribute and four points in
from attribute, then nothing will happen.
Recently, I wanted to animate a change from a 4 pointed polygon to a 5 pointed polygon. In this case, I included an extra point in the 4 pointed polygon that was a duplicate of an existing point and right next to that same duplicated point. When changing shape to a 5 pointed polygon, the previously duplicated point moved out from that spot to its new spot and the polygon adjusted accordingly and pleasingly.Tweet