实现一个动画的SVG Logo

主要步骤

1、在 google font 字体中找到一个喜欢的字体

2、可以在Google Font to Svg Path中对喜欢的字体进行预览，并进行下载

3、将下载的svg导入到Figma中

4、使用钢笔工具对照导入的svg进行勾勒

5、导出svg

6、放到项目中 （可参考本站源码的components/Valcosmos.tsx文件）

7、添加css样式文件（可参考本站源码的css/tailwind.css文件的62-102行）

Figma中的操作截图

使用下面那个高亮的钢笔工具进行勾勒即可

参考

• animated-signature-svg
• animated-svg-logo