MorphSVG

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-21
Updated:
2016-11-21
Tags:
animation JavaScript libraries
It's one her favorite GSAP functionality.

A codepen where SVGs morph into each other. A hipster head, where the glasses and facial hairs morph into different styles. 

Very easy with GSAP. 
Main principle: design everything first, slowly unveil things.

Did a title animation (Codepeon) where the text CSS-TRICKS morphs into different graphics. 
You point from one ​id​ to another
  TweenMax.to("#start", 1, {morphSVG:{shape:"#end"}, 
   ease:Linear.easeNone});
The two SVG don't have to have the same amount of points! 
Marc adds that it's not technically true. In most cases the tweening will look terrible.  

You need to convert  "primitives" to Path Data
  MorphSVGPlugin.convertToPath("circle, rect, 
  ellipse, line, polygon, polyline");
  // or just add the id:
MorphSVGPlugin.convertToPath("#foo");

Use shapeIndex

If the tweening is not right, you can specify which points to tween from
  TweenMax.to("#start", 1, {morphSVG:{shape:"#end", 
   shapeIndex:"1"}});
  • Default is shapeIndex: "auto"
  • Load the extra plugin, and a GUI will come up
  • Usually auto will be correct, but you can pick
  • Use findShapeIndex(#start, #end)
Normally you don't need this, as their algorithm gets better and better, but still in case.

This plugin has a GUI. It will show an infinite loop of tweening the two shapes, then you can play with the ​shapeIndex​ to see how it morphs... Codepen

She did a flame (candle flame) animation with morphing. Codepen

Filters in SVG. 
  <svg xmlns="http://www.w3.org/2000/svg" width="265" height="400" viewBox="0 0 265 400">
  <defs>
    <filter id="Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" 
       values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -7" result="goo"></feColorMatrix>
    </filter>
  </defs>
    
    ...
    
    <path id="f-stable" class="st7" d="M133.5 265.5s-29.5 12-28-60.5 23.5-91.5 23.5-91.5-10 
       23-5.5 52.5 25.5 60.5 10 99.5z" />
    <path id="f1" class="st9" d="M132.5 266.5s-29.5 12-28-60.5-1.2-108.3-1.2-108.3 17.8 39.8 
       22.3 69.3c4.6 29.5 22.4 60.5 6.9 99.5z" />
    <path id="f2" class="st9" d="M127.3 266.3s-24 11.8-22.5-60.7 24.2-93.3 24.2-93.3-7.8 
       25.2-3.3 54.7c4.5 29.5 33.3 64.3 1.6 99.3z" />
</svg>

Another way

Codepen by Blake Bowen

A Catmull-Rom Spline. Takes an array of points and smooths out the edges.