TOP

SVG Animations using SMIL (6)

SVG Anim (1) SVG Anim (2) SVG Anim (3) SVG Anim (4) SVG Anim (5)

SVG Anim (6)

Morphing

You can have many neat tricks using SMIL. For the bellow example shows how you can easily make a SVG animation in which one shape morphing into another.

This is how the code looks like.

<svg
  width="300px" height="300px" viewBox="0 0 300 300"
  style="background-color:#f3007c;"
>
  <path fill="#ff57a0" d="M205,104...;">
    <animate
      id="morph_to_rabbit"
      attributeName="d"
      dur="3s"
      values="M205,104...; M252,80...;"
      begin="3s;morph_to_bird.end+3s"
      fill="freeze"
    />
    <animate
      id="morph_to_bird"
      attributeName="d"
      dur="3s"
      values="M252,80...; M205,104...;"
      begin="morph_to_rabbit.end+3s"
      fill="freeze"
    />
  </path>
  <circle r="12" cx="240" cy="118" fill="#fff" />
</svg>

As you can see, all you do is to set 2 morphing states using animate. As long you have these 2 objects having the same number of vertices, your browser will take care of all the rest.

You see some magic spells going on with begin attributes for both objects. Yet, these are rather straight forward.

"morph_to_rabbit" begins at 3s (begin="3s"). When the first animation ends, the second animation "morph_to_bird" begins (begin="morph_to_rabbit.end+3s"). Now, when the latter ends, it comes back (after 3s) to the first animation (begin="morph_to_bird.end+3s").

References

50 Microinteraction Design Examples & Code Snippets
https://codemyui.com/tag/microinteractions/

BACK TOP