复刻antfu大佬的svg签名效果

I love three things in the world, the sun the moon and you, the sun is for the day, the moon is for the night and you forever

前言

在逛antfu大佬的个人网站时，看到一个很有风格的艺术签名，而且就像在网页上自动签字的效果一样，感觉很酷呢！

好了，不羡慕了，我立刻，马上想要一个。

准备工作

先了解 SVG，以及SVG的动画，还有如何设计线条，有了方向，有了疑问，接下来就好说了，向着方向，解决疑问就ok了，这里我查看了三篇大佬的博文：

感兴趣可以去看看，或者接着看这篇文章

线条设计

这里我使用了 figma 工具来进行设计：

先找一个你想要的艺术连体字
使用 figma 钢笔工具，按照这个连体字打点描绘
将打点完成的线条导出为 SVG

最终SVG效果：

自己觉得满意就行

SVG图形

在这种线段图形中，有两个重要的属性stroke-dasharray和stroke-dashoffset

stroke-dasharray:允许您指定线条的渲染部分的长度，然后指定间隙的长度 stroke-dashoffset:允许您更改 dasharray 的开始位置

当stroke-dasharray和stroke-dashoffset其实都是一个足够大的值（超过了线条的长度）时，这时会是一个完整的图案，随着 dashoffset 减小变成0的过程就是一个绘画的过程了，最后通过css添加上动画，就可以让这个 svg 看起来自动签名的感觉了。

动画

css 复制代码

@media (prefers-reduced-motion) {
  path {
    animation: none !important;
    stroke-dasharray: unset !important;
  }
}
@keyframes grow {
  0% {
    stroke-dashoffset: 1px;
    stroke-dasharray: 0 600px;
    opacity: 0;
    stroke: #00aeef;
  }
  10% {
    opacity: 1;
  }
  40% {
    stroke-dasharray: 600px 0;
    stroke: #ed1c24;
  }
  /* Moving back */
  85% {
    stroke-dasharray: 600px 0;
    stroke: #8cd790;
  }
  95%,
  to {
    stroke-dasharray: 0 600px;
    stroke: #f69f37;
  }
}
path {
  stroke-dashoffset: 1px;
  stroke-dasharray: 600px 0;
  animation: grow 10s ease forwards infinite;
  transform-origin: center;
  stroke: #303030;
  animation-delay: 0s;
}

记得 dasharray 的长度一定要大于等于svg中线条的长度，不然就会变成分段线条