我制作一个好看的动态签名🖋️

过去我在其他的博客中看到过动态签名，猜出了大概的实现方式。但是由于觉得自己手写的签名不是很好看，就没有动手去做它。偶然在 Innei 的博客中知道实际上可以用 Google Fonts 来生成对应的 SVG，所以就学着自己也整了一个。

下面是具体的步骤：

去 Google Fonts 网站上找一个自己喜欢的手写字体。可以在筛选项中添加Handwriting，这样就只会显示手写字体。

这里推荐选择sacramento这个字体，这个是我觉得比较好看的字体。

然后去这个网站生成 SVG。这是大佬做的在线工具，可以根据 Google Fonts 生成 SVG 路径。

字体大小保持 100 即可，你需要勾选上 Union，取消勾选 Non-Scaling Stroke。一个小技巧，选择字体时不需要滚动，可以在选中下拉列表的情况下直接输入对应的字体名字，快速定位到你想要的字体。

如果你放大生成的签名图片就会发现，字体的描边无法完整显示出来，所以我们需要将画布稍微放大一点，给描边预留出空间。

使用 Adobe Illustrator 打开 SVG 文件，打开画板选项，将宽高都增加几个像素，保证描边可以显示出来，然后保存文件。

在添加动画之前，先处理一下 SVG，删除掉多余的属性和标签，只保留路径信息即可，viewBox 属性也要保留。

xml

接下来把它添加你的页面上，我们为它添加样式和动画。

CSS 如下：

css.animated-signature path {

stroke-dasharray: 2400;

stroke-dashoffset: 2400;

fill: transparent;

animation: drawSignature 8s linear infinite both;

stroke-width: 2px;

stroke: black;

}

动画如下：

css@keyframes drawSignature {

0% {

stroke-dashoffset: 2400;

}

15% {

fill: transparent;

}

35%,

75% {

stroke-dashoffset: 0;

fill: black;

}

90%,

to {

stroke-dashoffset: 2400;

fill: transparent;

}

}

其实只是用到了 troke-dasharray 属性和 stroke-dashoffset 实现路径动画。

最终效果：

完整的代码分享在 CodePen 上。

参考

Animated SVG Logo - Anthony Fu

动画签名的制作 - Doctor Wu