作品简介
这是一个比较特别的SVG动画特效，它用纯SVG绘制了一只水墨风格的可爱小鸟。它的特别之处在于小鸟的描边和填充并不是纯色，而是带有一点水墨风格样式，边线不再光滑，而是由浓重的水墨画笔和毛刺阴影代替，韵味十足，这要说是用SVG绘制出来的，着实令人难以置信。
再来说说实现的核心技术。
这种SVG水墨风格绘制效果主要是由SVG滤镜实现的。
例如里面用到了颜色矩阵feColorMatrix，fe代表的意思是svg滤镜，feColorMatrix则可以完全的类比到PS中的通道混合器。
例如，我们可以在defs节点中定义svg滤镜：
<filter id="noise-0" filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="400%" height="400%">
<feTurbulence type="fractalNoise" baseFrequency="0.41000000000000003 0.8" result="turbulence"></feTurbulence>
<feColorMatrix in="turbulence" type="matrix" values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 0.569 0" result="coloredNoise"></feColorMatrix>
<feComposite operator="in" in="coloredNoise" in2="SourceAlpha" result="composite"></feComposite>
<feColorMatrix in="composite" type="luminanceToAlpha"></feColorMatrix>
<feBlend in="SourceGraphic" in2="composite" mode="color-burn"></feBlend>
</filter>
在滤镜feColorMatrix颜色矩阵中，第一行第一列代表的就是红色输出通道，第一行第二列则可以理解为上面的红色输出通道中绿色加入红色的比例。通过改变颜色矩阵中的值，实现色调的变换。
源码下载
“如果你对这款SVG水墨绘制的小鸟感兴趣，可以在公众号主页回复“5071”获取源码下载链接。
源码仅供用于学习，请勿用于商业用途。
关注「前端新世界」加星标，我有发不完的H5动画
↓↓↓
END
精彩推荐
