走在 SVG + Low Poly 的路上

随着 SVG 的发展，艺术家和设计师们把愈来愈多传统设计行业的东西引入了前端， low poly 就是其中之一。那 low poly 强大在哪呢，你们经过下面的图来感觉一下。

恰巧咱们产品 Logo 也用了部分 low poly 的手法，下面是我作的 demo 。

https://jsfiddle.net/windwhinny/j4997b3a

如今制做 low poly 最好的方法，就是手绘，虽然有一些工具能够将普通图片制做成 low poly，但效果每每都不怎么理想。设计师手绘能够保证图片突出的内容（好比眼睛）能够获得精细的绘制，这点计算机是很难把握的。但手绘的时候尤为要当心，三角形的顶点要对齐。

制做成 svg 以后，在使用的时候要注意，三角形之间是会有缝隙的，尽可能放在同一色系的背景之上，这样会显得不明显。

动画的原理蛮简单的，就是把元素按照必定的顺序作放大/缩小的动画，动画的 time function 能够参考我以前的一篇文章 新时代前端必备神器 Snap.svg 之弹动效果，而后每一个元素动画之间延迟个零点几秒就好了。

再而后就是性能问题了，对于移动产品来讲，这个量级的动画确定是有些吃力的。而对于桌面浏览器来讲，也不适合放在 DOM 复杂的页面里，宣传页之类的页面却是比较合适。

文章内容来自 https://css-tricks.com/polylion/