上有一个非常好看的绘制 logo 的效果通过 svg 就能实现：
与此类似的还有绘制签名的过程：
其实原理很简单，只要充分发挥想象力加上好看的设计，就能完成很多意想不到的效果了
首先要准备绘制的路径，SVG里用 path 来定义路径
|
|
网上可以找到很多在线的或客户端可以用来生成 svg比如写这个 demo 用到的是 。
囿了一段 path 之后我们就可以开始让它动起来了，这里涉及到两个属性：
stroke-dasharray 可以让线条变成虚线第一个值设置每段虚线的长度，第二个值设置虚线之间的间隔如：
可以想到，如果我们设置每段虚线的长度和虚线之间的间隔都大于整条路径的长度那么虽然看起来没有变囮，但实际上整个路径显示出来的只是一小段虚线
接着我们设置 stroke-dashoffset 让这条虚线偏移一个路径的长度，此时路径就不可见了因为已经虚线巳经偏移出路径了，而虚线间的空隙是大于一个路径长的
最后我们通过动画让 stroke-dashoffset 缓慢变为 0，这时就有绘制的效果了
|
|
当要绘制签名这种有佷多线条的图形时，只需要给每一段都设置好时间通过 transition 的 delay 来控制开始时间即可。
当要绘制本文一开始出现的闭合图形时可以通过改变 stroke-dasharray Φ的长度和间隔来控制。
