Today I Learned

A Hashrocket project

Ready to join Hashrocket? Find Openings here and apply today.

Animating polygon must have same number of points

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 the 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.