最近刚好在看svg相关的内容，然后逛到antfu大佬网站上的这个签名的效果
看了下代码是用svg实现的，其实实现起来也不难，那么就搞一个吧
原理
其实就是利用svg中描边相关的两个属性
stroke-dasharray用于控制间隙stroke-dashoffset用于控制线条的偏移
1.在figma中用钢笔工具随便画个东西 这里要注意的是要搭配动画使用需要钢笔工具所画的线是能够一笔构成的，这样svg中的path才不会出问题,这里先画个丑陋的苹果然后右键导出为svg
2.通过
stroke-dasharray改变间隙，使得线段和间隙和整个路径的长度一样 给path添加上这个属性，可以来看看这个属性的效果
3.利用
stroke-dashoffset改变线段的偏移，把当前展示的第一段线挤出去
4.那么从0出现的效果就很明显了，只需要改变stroke-dashoffset的值从线段长变成0,最后再加上animate的动画就ok了
html
<style>
#path {
stroke-dasharray: 135;
stroke-dashoffset: 135;
animation: draw 5s ease;
}
@keyframes draw {
0% {
stroke-dashoffset: 135;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</body>更进一步
其实最麻烦的问题在于这个细节部分的实现，figma中钢笔工具画出的图只能是同一种粗细的线段，没办法形成这种类似写字的粗细变换和笔锋的效果
我想到的一个最简单的办法就是利用mask遮罩，找到一个最终想要的结果的svg图，然后对着这个svg去用钢笔工具画，然后做动画，这样在遮罩以外的线条部分不会被展现并且还能实现动画的效果。
举个例子 左边是我找的一个svg图，右边是我对着他用钢笔工具画出来的
html
<svg
width="54"
height="41"
viewBox="0 0 54 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<mask id="mask">
<g>
<path
d="M1.32733 22.3792C1.69973 22.1815 2.06414 21.7175 2.69722 20.9925C3.3303 20.2702 3.70272 19.7587 4.49008 18.7622C5.27744 17.763 5.73762 17.1355 6.63404 16.0045C7.53046 14.8735 8.05713 14.2408 8.97484 13.1125C9.89254 11.9815 10.3607 11.4278 11.2225 10.3548C12.087 9.28183 12.5499 8.72556 13.2893 7.7422C14.0288 6.76148 14.3347 6.27903 14.9226 5.44594C15.5105 4.61549 15.8935 4.28594 16.226 3.58467C16.5585 2.8834 16.641 2.46686 16.5824 1.93959C16.5266 1.41232 16.3377 1.14341 15.9414 0.950955C15.545 0.761138 15.1966 0.703139 14.6007 0.985229C14.0049 1.26468 13.6697 1.5705 12.9648 2.3535C12.2599 3.13649 11.8796 3.6954 11.0736 4.90285C10.2703 6.1103 9.7888 6.86693 8.94558 8.39338C8.10236 9.92247 7.63419 10.7951 6.85747 12.543C6.08341 14.2935 5.67377 15.2611 5.06729 17.1382C4.46081 19.0179 4.18949 20.0382 3.82241 21.939C3.45267 23.8398 3.34361 24.831 3.22391 26.6448C3.10687 28.4587 3.1042 29.3814 3.22922 31.008C3.35158 32.632 3.48724 33.4097 3.84634 34.7701C4.2081 36.1278 4.42357 36.7685 5.03005 37.7993C5.63653 38.8301 6.04086 39.2756 6.88408 39.9215C7.72464 40.5701 8.25929 40.7994 9.23551 41.0314C10.2117 41.2634 10.7757 41.2555 11.7705 41.0815C12.7653 40.9049 13.3053 40.6861 14.2071 40.1562C15.1115 39.6262 15.561 39.2413 16.2845 38.432C17.008 37.6226 17.3751 37.1006 17.8273 36.1094C18.2795 35.1155 18.4657 34.5249 18.5455 33.473C18.6253 32.4211 18.5322 31.8332 18.2316 30.8472C17.9311 29.8586 17.6464 29.3656 17.04 28.5378C16.4308 27.7073 16.0159 27.3092 15.1939 26.6976C14.372 26.0833 13.8054 25.8539 12.9276 25.4717C12.0525 25.0894 11.5657 24.8838 10.8129 24.7889C10.0601 24.694 9.59728 24.7757 9.15838 24.9998C8.72214 25.2212 8.54924 25.5244 8.62638 25.904C8.70086 26.2837 8.9243 26.6475 9.54408 26.8979C10.1639 27.151 10.6879 27.1668 11.7226 27.1589C12.7547 27.1537 13.3798 27.0535 14.7125 26.8663C16.0478 26.6818 16.8378 26.5552 18.3939 26.2309C19.9527 25.9067 20.8384 25.701 22.5009 25.2397C24.1634 24.7783 25.0652 24.5305 26.7117 23.9241C28.3583 23.3204 29.2201 22.9592 30.7363 22.2105C32.2552 21.4618 33.0053 21.0215 34.2981 20.1858C35.5908 19.3501 36.1707 18.8808 37.1974 18.0319C38.2242 17.183 38.6658 16.719 39.4319 15.9413C40.1953 15.1609 40.6927 14.7233 41.0252 14.1354C41.3577 13.5448 41.2832 13.1704 41.097 12.9938C40.9082 12.8172 40.5703 12.7882 40.0836 13.2548C39.5968 13.7215 39.3281 14.2619 38.6631 15.327C37.9981 16.3947 37.5406 17.1566 36.7586 18.5908C35.9765 20.025 35.5482 20.895 34.7582 22.5005C33.9682 24.1087 33.524 24.9892 32.8111 26.6264C32.0982 28.2609 31.7923 29.1652 31.1912 30.6811C30.5927 32.197 30.3027 32.9299 29.808 34.2059C29.3105 35.4819 29.0233 36.1199 28.7094 37.0584C28.3982 37.997 28.2864 38.4188 28.2412 38.8986C28.1987 39.3811 28.2971 39.4892 28.4966 39.4628C28.6961 39.4364 29.0259 39.3521 29.2387 38.7694C29.4542 38.1842 29.4036 37.6226 29.5659 36.5444C29.7255 35.4661 29.7761 34.7569 30.0421 33.3781C30.3081 31.9966 30.4863 31.1873 30.8932 29.6371C31.3002 28.0896 31.5263 27.2538 32.0716 25.6378C32.6169 24.0243 32.9361 23.1596 33.6197 21.5672C34.306 19.9722 34.6811 19.1629 35.4951 17.6707C36.309 16.1785 36.7479 15.4404 37.6896 14.1037C38.6285 12.7671 39.1818 12.0816 40.1979 10.9823C41.2114 9.88029 41.7514 9.38201 42.7675 8.59638C43.7836 7.81338 44.3422 7.46538 45.2732 7.06466C46.2016 6.66393 46.6538 6.60066 47.4145 6.59802C48.1779 6.59275 48.5131 6.70875 49.0823 7.04621C49.6489 7.38366 49.8697 7.59193 50.2581 8.28265C50.6464 8.97074 50.8246 9.42683 51.0268 10.4866C51.2316 11.5491 51.2955 12.2556 51.2742 13.5844C51.2556 14.9131 51.1279 15.6407 50.9257 17.1276C50.7262 18.6119 50.6092 19.4529 50.266 21.011C49.9256 22.569 49.6808 23.3942 49.2153 24.9207C48.7472 26.4445 48.4572 27.2328 47.9359 28.6353C47.4118 30.0352 47.1006 30.7734 46.6006 31.9281C46.1005 33.0802 45.5605 33.8553 45.4328 34.4036C45.3051 34.952 45.5898 35.1023 45.9622 34.6673C46.3346 34.2349 46.7602 33.3886 47.2948 32.2313C47.8295 31.0766 48.1141 30.3094 48.6328 28.8884C49.1541 27.4674 49.4255 26.6659 49.8936 25.1237C50.3618 23.5788 50.6118 22.743 50.9736 21.1665C51.3354 19.59 51.4657 18.749 51.7024 17.2383C51.9418 15.7277 52.0988 14.9974 52.1653 13.6134C52.2318 12.2293 52.2185 11.4911 52.0349 10.3153C51.8487 9.14211 51.7184 8.58847 51.2423 7.73693C50.7661 6.88802 50.4283 6.50312 49.6569 6.06812C48.8882 5.63048 48.3429 5.51976 47.3906 5.55403C46.4383 5.59094 45.9196 5.75966 44.8955 6.24475C43.8714 6.73248 43.3181 7.1332 42.2727 7.98475C41.2274 8.83892 40.6954 9.36092 39.6686 10.5104C38.6418 11.6598 38.0912 12.3585 37.1442 13.7294C36.1946 15.1003 35.7531 15.8516 34.9285 17.3675C34.1039 18.8834 33.7235 19.7033 33.0239 21.3115C32.3243 22.9223 31.9998 23.795 31.4279 25.4189C30.8533 27.0456 30.6219 27.8866 30.1591 29.4368C29.6989 30.9869 29.4861 31.791 29.1164 33.1672C28.7466 34.5434 28.5418 35.242 28.3104 36.3176C28.0763 37.3933 27.946 37.9179 27.9513 38.5506C27.9539 39.186 28.1056 39.3653 28.3317 39.4892C28.5578 39.6157 28.8078 39.6052 29.0738 39.1781C29.3425 38.7536 29.3744 38.3028 29.667 37.3616C29.9596 36.4178 30.1032 35.7534 30.5341 34.4669C30.9677 33.1777 31.2497 32.4369 31.8269 30.921C32.4015 29.4051 32.7021 28.5061 33.4149 26.8848C34.1252 25.2634 34.5667 24.3855 35.3833 22.8116C36.2026 21.2377 36.6601 20.3888 37.5034 19.0126C38.3439 17.6338 38.8865 16.9431 39.5914 15.9281C40.2963 14.9131 40.7432 14.5229 41.0279 13.9376C41.3125 13.3497 41.2007 13.094 41.0199 12.9991C40.8363 12.9015 40.5783 12.9964 40.1128 13.4552C39.65 13.9113 39.392 14.486 38.7057 15.2822C38.0167 16.081 37.639 16.5793 36.6787 17.4413C35.7211 18.3061 35.1546 18.7648 33.907 19.6005C32.6568 20.4362 31.9227 20.8765 30.4384 21.6173C28.9541 22.3608 28.1056 22.7167 26.483 23.3072C24.8577 23.8978 23.9639 24.1377 22.3174 24.5674C20.6682 24.9971 19.7851 25.1922 18.2449 25.4559C16.7048 25.7195 15.9121 25.8144 14.614 25.8882C13.3186 25.962 12.7095 25.8882 11.7625 25.8223C10.8156 25.7564 10.4245 25.5903 9.87658 25.5587C9.33128 25.5244 9.14774 25.5877 9.0307 25.6562C8.91632 25.7274 8.99345 25.7986 9.29935 25.9067C9.60525 26.0174 9.93243 26.0596 10.5628 26.2046C11.1933 26.3522 11.6641 26.3522 12.4541 26.6369C13.2441 26.919 13.7735 27.1141 14.513 27.6256C15.2498 28.137 15.6089 28.4824 16.1435 29.1916C16.6782 29.8981 16.9203 30.3252 17.1836 31.1662C17.4496 32.0046 17.5321 32.4923 17.4629 33.3913C17.3937 34.2903 17.2368 34.7991 16.8378 35.6612C16.4361 36.5259 16.1036 36.9978 15.4626 37.707C14.8242 38.4135 14.4172 38.7457 13.6378 39.2044C12.8584 39.6605 12.4009 39.8345 11.5683 39.9953C10.7331 40.1562 10.2889 40.1746 9.46693 40.0059C8.64499 39.8398 8.20077 39.6895 7.45597 39.1596C6.71383 38.6323 6.32813 38.287 5.74825 37.3695C5.16837 36.4521 4.92897 35.8589 4.55391 34.575C4.18151 33.2937 4.02457 32.5318 3.88093 30.9527C3.73463 29.3735 3.72398 28.4613 3.82772 26.6818C3.9288 24.8996 4.03256 23.9189 4.39166 22.0471C4.75076 20.1752 5.01675 19.1682 5.62589 17.3174C6.23503 15.4694 6.64468 14.515 7.4347 12.8014C8.22738 11.0877 8.70351 10.2256 9.58397 8.75193C10.4618 7.28084 10.9725 6.5453 11.8317 5.43803C12.6935 4.3334 13.1936 3.89576 13.8852 3.22086C14.5795 2.54331 14.9253 2.39568 15.2977 2.05823C15.6701 1.72077 15.6834 1.57314 15.7525 1.53096C15.8217 1.48877 15.7818 1.55204 15.6435 1.84995C15.5078 2.14786 15.3854 2.41413 15.0689 3.02313C14.7524 3.63213 14.5608 4.05394 14.0608 4.89758C13.5633 5.74121 13.2707 6.24212 12.5765 7.23602C11.8822 8.22729 11.4327 8.78356 10.5868 9.85919C9.74091 10.9322 9.27542 11.4858 8.34708 12.6063C7.4214 13.7267 6.87344 14.3489 5.95041 15.4588C5.02739 16.5687 4.54592 17.1803 3.7293 18.1532C2.91268 19.126 2.44718 19.561 1.8673 20.3281C1.28742 21.0953 0.933647 21.5804 0.824587 21.9891C0.715527 22.4003 0.952271 22.5796 1.32733 22.3792Z"
fill="white"
stroke="white"
/>
</g>
</mask>
</defs>
<path
id="path"
mask="url(#mask)"
d="M1 22.0983L16 4.09834C16 4.09834 17.1436 2.9597 17 2.09834C16.9282 1.66766 16.8744 1.32298 16.5 1.09834C15.9705 0.780653 15.5457 1.30943 15 1.59834C14.0238 2.11515 13.7163 2.75749 13 3.59834C11.5234 5.33179 10 8.59834 10 8.59834L8 12.5983C8 12.5983 6.19563 16.7801 5.5 19.5983C4.88453 22.0918 4.66915 23.5356 4.5 26.0983C4.37139 28.0467 4.27829 29.1583 4.5 31.0983C4.70441 32.8869 4.67384 33.9989 5.5 35.5983C6.19988 36.9533 6.71525 37.7766 8 38.5983C9.04036 39.2637 9.77161 39.4713 11 39.5983C12.3734 39.7404 13.2131 39.5986 14.5 39.0983C16.4346 38.3463 17.6696 37.5007 18.5 35.5983C18.9752 34.5098 18.9116 33.7828 19 32.5983C19.0727 31.6247 19.2313 31.0468 19 30.0983C18.6664 28.7304 17.963 28.1256 17 27.0983C15.8512 25.8729 15.0685 25.1993 13.5 24.5983C12.7482 24.3103 12.3027 24.0366 11.5 24.0983C10.8843 24.1457 10.2761 24.0461 10 24.5983C9.62952 25.3393 10.7308 25.7907 11.5 26.0983C12.2252 26.3884 12.7198 26.1342 13.5 26.0983C16.2928 25.9699 17.7774 25.2337 20.5 24.5983C22.8521 24.0494 24.1944 23.8177 26.5 23.0983C29.0962 22.2883 30.5672 21.8142 33 20.5983C34.4082 19.8946 35.2374 19.5386 36.5 18.5983C38.9463 16.7766 39.1088 14.4918 41.5 12.5983C45.7534 9.23041 36.7626 19.6673 34.5 24.5983C32.2595 29.4812 30 37.5983 30 37.5983C30 37.5983 29.9366 38.5983 29.5 38.5983C29.0634 38.5983 29 37.5983 29 37.5983L33 24.5983C33 24.5983 34.5166 18.8058 36.5 15.5983C37.8152 13.4715 40.5 10.5983 40.5 10.5983C40.5 10.5983 41.9826 9.0317 43 8.09834C44.1238 7.06741 44.5911 6.18207 46 5.59834C46.9198 5.21724 47.5078 5.01536 48.5 5.09834C49.5479 5.18598 50.1973 5.41912 51 6.09834C51.9999 6.94443 52.1041 7.84974 52.5 9.09834C52.9173 10.4145 52.9595 11.2182 53 12.5983C53.0697 14.9728 52.4592 16.2677 52 18.5983C51.4964 21.1543 51.2799 22.6127 50.5 25.0983C49.3485 28.7681 48.4524 30.7845 46.5 34.0983"
stroke="black"
stroke-width="3"
stroke-linecap="round"
/>
<style>
#path {
stroke-dasharray: 245;
stroke-dashoffset: 245;
animation: draw 8s ease infinite;
}
@keyframes draw {
/* 初始状态：完全隐藏 */
0% {
stroke-dasharray: 245px;
stroke-dashoffset: 245px;
opacity: 0;
}
/* 开始显示 */
10% {
opacity: 1;
}
/* 完全显示 */
40% {
stroke-dasharray: 245px;
stroke-dashoffset: 0;
}
/* 保持显示 */
85% {
stroke-dasharray: 245px;
stroke-dashoffset: 0;
}
/* 从末尾开始消失 */
95%,
to {
stroke-dasharray: 245px;
stroke-dashoffset: 245px;
}
}
</style>这是最终的效果，左边是遮罩mask，右边是最后的svg效果,虽然在线条绘制上由于粗细的问题会有一些瑕疵，但是这是一种比较简单的实现方式了。