In the realm of web animation, has a number of completely unique methods to move and manipulate elements. Perhaps the most spectacular of these is “morphing”: the ability to move and stretch one element seamlessly into another.

Setup

The rules for native morphing in SVG are fairly simple: the elements to be morphed must have the same number of points. These do not have to be the same kinds of points, however: it’s entirely possible to morph a bezier curve point into a corner, for example.

Probably the simplest example to start with is an irregular polygon. Something like this: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477" />
</svg>

You can easily create this in an application like Adobe Illustrator, exporting the results as SVG to create the following:

Taking the same file in Illustrator, points are manipulated and moved into their target shape. We’ll use a SMIL <animate> element to target the points of the previous element, mapping them to the new one; at this stage, it’s probably easiest to copy the Illustrator object and paste it into your editor, cleaning up and adding code as needed to produce the following: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477">
        <animate attributeName="points" dur="1s"  repeatCount="indefinite"
    to="190,20 374.3,8.3 361.8,479.4 199.3,454.4" />
    </polygon>
</svg>

Which produces:

There’s a few important points about this code:

  • the <polygon> moves from being a “self-closed” element (<polygon points=" … " />) to having a closing tag (</polygon>) which encloses the <animate> element.
  • dur is “duration”, i.e. how long the morph animation takes to move from one state to another.
  • repeatCount="indefinite" is the SMIL equivalent to CSS “infinite” animation.

Closest-Point Animation

By default, SVG moves matching points. By moving the points in Illustrator not to their nearest position but in clockwise order, we provide the impression that the element is “rotating”: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477">
        <animate attributeName="points" dur="1s" begin="0s" 
    to="371.7,7.7 363,480.3 199.7,454.3 190,19" />
    </polygon>
</svg>

Creates this:

More Complex Morphs: Hiding Points

To animate between shapes that appear completely different, it becomes necessary to “hide” points inside elements. For example, to turn a star into a circle, it’s easiest to start by creating the latter, adding points inside it:

Circle prepared for morphing into another shape, showing hidden points

Alternate points on the circle can then be moved and altered to create the star.

Termination Shock

Recently the Chrome development team announced plans to deprecate SMIL in their browser in favor of other technologies, such as the Web Animation API and CSS animations. This does not mean that SMIL will be removed from the browser, only that Google is advising developers to look at using alternative technologies. Unfortunately, target morphing is not something that these alternates address yet, although Greensock’s recent announcement of MorphSVG looks like it could be a good option.

Conclusion

I find morphing with SVG particularly wonderful, harkening back to some of the original advantages and features of Flash animation. However, it can be taken further and in many different directions, as I’ll show in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.