复刻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了，这里我查看了三篇大佬的博文：

1. How SVG Line Animation Works
2. Animated line drawing in SVG
3. Animated SVG logo

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

线条设计

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

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

最终SVG效果：

自己觉得满意就行

SVG图形

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

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

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

动画

@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中线条的长度，不然就会变成分段线条

原文链接：https://juejin.cn/post/7311932190442324003 作者：陪我去看海