看上面的动画很酷，要实现这样的动画难么？在以前可能还真有点难度，不过使用SVG的话，就不怎么难了。下面就一步一步来学习怎么来实现这样的动画效果。
准备工作
1、首先当然是GreenSock提供的TweenMax和MorphSVGPlugin插件了，插件是收费的，不过在codepen上是可以免费使用的。
2、矢量设计软件Adobe illustrator，用最新的版本。
3、一些SVG源文件。
4、基本的SVG/JS/HTML/CSS知识。
下面三个链接是将要用到的SVG源文件，可以下载下来。
这里要提醒的是，MorphSVG插件只针对单个的path之间的变形起作用。
像上面链接提供的SVG文件每个形状都是由多个path组成的，所以需要用到Adobe illustrator来对它们进行转换。
下面就来看看使用Adobe illustrator如何对SVG进行转换。
使用illustrator编辑文件
在右边的图层选项卡里，可以看到这个形状是由很多个图层里形状组成的。
先选择所有的图层，右击鼠标，删除颜色填充（fill），设置边框（stroke）。
经过这一步操作后，你会发现我们的图形就变成了一个线框图：
下一步是把这些图层的形状组合成一个图层，选中所有的图层，按住（ Crtl + Shift + G）快捷键把路径（path）分散组，图层就会全部一个平级的关系上，没有嵌套。
最后一步，把这些形状合并成一个路径（path）。在菜单上 对象 -> 复合路径 -> 建立
所有的路径就会被合成在一个图层上。
另外的两个SVG文件也这样操作下就可以了。
用illustrator打开这三个文件，把它们的宽高调成一样，这样在后面做动画的时候可以省不少事。
然后导出为SVG文件：
先隐藏两个SVG，只显示一个就可以了。
svg #pathtuto1,svg #pathtuto2,svg #pathtuto3{
stroke:red;
fill:none;
}
svg path#pathtuto2,svg path#pathtuto3{
display:none;
}
基本的准备工作做完之后，接下来就是动画部分了。
先把TweenMax和MorphSVG插件加载进来，由于MorphSVG是收费的，可以通过这个链接免费使用它。
加下来就简单了，只需要使用MorphSVG提供的方法一点点代码就可以实现morph动画。
var morphTimeline = new TimelineMax({
repeat:-1,
repeatDelay:2
});
morphTimeline
.to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto2"}})
.to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto3"}},"+=2")
.to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto1"}},"+=2");
;
一个morph动画就完成了。
动画完成了，后面就可以随意发挥，添加下样式，使它变得更漂亮些。
本文主要是从Morph anything GSAP MorhSVG / AI这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
