css 实现一笔画动画（如签名、手写、手绘等）

<template>
  <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
    <g id="Layer_1">
      <title>Layer 1</title>
      <path
        d="m113.6,311.39999c0,1 -1.95128,1.43878 0,1c20.51162,-4.61237 71.4047,-31.92294 108.00001,-63c24.79321,-21.05461 31.49937,-35.9626 32,-46c0.09962,-1.99751 0,-3 -2,-4c-6,-3 -13.96394,-7.08557 -21,-10c-4.97525,-2.06081 -7.14935,-2.52573 -8,-2c-1.90211,1.17557 -2.49756,5.9258 -3,11c-0.88684,8.95621 0,19 0,28c0,9 0,15 0,19c0,8 0,14 0,19c0,3 0,5 0,8c0,1 0,2 0,3c0,1 0,2 0,2c0,1 0,-1 2,-9c2,-8 5.28859,-14.86829 7,-19c1.21014,-2.92157 1,-4 2,-4c1,0 2.64749,-2.97252 7,-4c3.89299,-0.91901 6,-2 7,-2c1,0 0.92911,2.00252 1,3c0.50127,7.05328 1,13 1,19c0,8 0,13 0,16c0,0 0,1 0,2c0,1 -0.85274,0.8269 -2,0c-5.44197,-3.92236 -10,-6 -14,-10c-3,-3 -4.70546,-5.34619 -7,-7c-1.814,-1.30746 -2,-1 -2,-2c0,-1 1.76108,-1.41589 5,-3c2.84073,-1.38934 8.87856,-3.49345 12,-4c1.97418,-0.32036 3,-1 3,-1c0,1 -1,5 -5,9c-3,3 -4,4 -3,4c4,0 8,0 11,0c0,0 -2.12424,1.81769 -11,8c-11.16087,7.77399 -21.60486,13.86575 -34,19c-8.76469,3.63046 -12,4 -11,5c1,1 18,-8 33,-12c30,-8 53.52448,-6.59311 52,-15c-0.17844,-0.98395 -2.21402,-1.83801 -10,0c-4.35251,1.0275 -8.87856,3.49347 -12,4c-2.96126,0.48056 -5,0 -6,0c-1,0 -2,0 -3,0c-1,0 -0.69344,-0.4588 -2,-1c-0.92387,-0.38269 -1.30048,0.91608 -2,4c-1.78343,7.86252 -1,15 -1,22c0,5 0,9 0,10c0,0 -1.36583,-1.33646 1,-8c3.90182,-10.98981 8,-17 12,-26c4,-9 6.71411,-15.21167 9,-18c1.79318,-2.18735 2.82443,-3.09789 4,-5c0.52573,-0.85065 0,-3 1,-3c1,0 1.58578,-1.41422 3,0c0.70709,0.70711 -0.3107,5.00966 0,10c0.50098,8.04669 1,16 1,22c0,3 0,4 0,2c0,-3 0,-10 0,-23c0,-8 0,-17 0,-24c0,-5 0.88153,-7.19028 4,-9c1.93399,-1.12234 5.96765,-2.1169 13,-4c11.94836,-3.19949 19,-5 20,-6c0,0 2.6532,4.86452 4,13c1.96671,11.8799 2.99829,26.91208 4,44c0.5267,8.98459 0,15 0,20c0,3 0,7 0,8c0,2 0,3 0,4c0,1 -0.78491,-0.22733 -5,-4c-4.77115,-4.27039 -11.11349,-11.92029 -16,-19c-4.09622,-5.93472 -8.41589,-10.76108 -10,-14c-1.38934,-2.84073 -2.95517,-3.54916 -4,-7c-0.28979,-0.95709 -1,-3 -3,-5c-1,-1 -0.58578,-2.58578 -2,-4c-0.70709,-0.70711 -1.14728,-1.1731 0,-2c1.814,-1.30745 4,-2 8,-4c0,0 2.0979,-3.17557 4,-2c0.85065,0.52573 -4.54901,6.60641 -8,12c-1.20514,1.88351 -0.09222,2.49622 4,3c4.96252,0.61093 11,0 17,0c1,0 2,-1 3,-1c0,0 2,0 3,0c1,0 1.94882,-0.30319 7,-1c12.91608,-1.78177 30.10001,-3.35617 45,-6c9.07776,-1.61073 13.06836,-2.92659 12,-2c-3.77728,3.27602 -8.13202,5.75531 -12,8c-3.11847,1.80972 -3.69345,2.4588 -5,3c-0.92389,0.38269 -1.92389,-0.38269 -1,0c3.91968,1.6236 9.15686,4.57971 15,7c2.06586,0.85571 3.29291,1.29291 4,2c0.70709,0.70709 1,1 1,2c0,1 0.48056,6.03873 0,9c-0.50653,3.12143 -3.14935,4.47427 -4,5c-1.9021,1.17557 -1,2 -2,2c-3,0 -6.0769,0.26855 -10,-1c-5.12396,-1.65686 -8.186,-3.69254 -10,-5c-1.14728,-0.8269 -1.29291,-0.29291 -2,-1c-0.70709,-0.70709 1,-3 0,-3c-2,0 0.29889,3.00745 0,9c-0.50061,10.03738 -1,21 -2,28c-1,7 -2.9465,13.5405 -1,14c2.17624,0.51373 5.18536,-7.82285 9,-12c5.26675,-5.76727 9.724,-10.22272 13,-14c2.77979,-3.20511 5.19028,-5.88153 7,-9c1.12234,-1.93399 3,-4 4,-5c0,0 2,-2 1,-2c-1,0 0.49622,1.90778 1,6c0.48874,3.97003 -4.34186,10.36703 1,15c0.75546,0.65521 -0.07611,0.38269 -1,0c-1.30655,-0.5412 -1,-6 -1,-15c0,-8 0,-17 0,-24c0,-5 -0.70709,-7.29291 0,-8c0.70709,-0.70709 7.08743,-1.79395 12,-4c6.11951,-2.74806 10,-4 11,-4c1,0 1,0 3,0c2,0 2.4588,-0.30656 3,1c1.14804,2.77164 0.80615,7.03043 2,14c0.8609,5.02582 1.54691,11.84464 3,18c1.6246,6.8819 1.51944,13.03873 2,16c0.50653,3.12143 1,4 1,5c0,1 0,2 0,2c1,1 1,2 1,4c0,0 -0.02676,1.22977 -1,1c-2.17624,-0.51373 -3.38074,-2.52222 -6,-5c-3.63226,-3.43607 -4.92807,-8.61105 -7,-11c-1.46509,-1.68924 -4,-4 -5,-6c-1,-2 -2.23462,-3.15225 -3,-5c-1.0824,-2.61313 -3.14935,-3.47427 -4,-4c-1.9021,-1.17557 -2.4588,-1.69345 -3,-3c-0.38269,-0.92389 -1,-1 -1,-2c0,-1 0,-1 0,-1c1,-1 2,-2 3,-2c1,0 1,1 1,1c0,1 0,4 0,6c0,4 -1.78986,7.07843 -3,10c-0.85571,2.06586 -2,4 -3,5c0,0 1,0 2,0c3,0 7.01291,0.16019 8,0c3.12143,-0.50653 4,-1 4,-1c1,0 1,-1 2,-1l1,0l-1,0l-4,0"
        id="svg_71"
        stroke="#000"
        fill="none"
      />
    </g>
  </svg>
</template>

<style scoped>
path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 8s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

实现原理

首先使用stroke-dasharray属性设置一个尺寸足够大的虚线。由于stroke-dasharray属性先显示实色部分，再显示透明部分，因此，默认状态下，元素的描边就是实线效果。此时再设置stroke-dashoffset属性值，让虚线起始位置正好偏移实色部分的长度，这样描边显示的是透明部分，描边是不可见的。然后执行animation动画，让stroke-dashoffset属性值慢慢变成0，虚线的实色部分就会慢慢出现，于是一个描边动画效果就出现了。

使用方法

1. 打开在线svg编辑器
   https://c.runoob.com/more/svgeditor/
2. 选择铅笔工具
   
   在画布上拖拽鼠标绘制出目标图画或文字。

若路径中断，则多个路径会同时绘制

3. 按Ctrl+u 出现svg的源码，复制粘贴到页面中
   
4. 添加css样式

path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 8s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

调整stroke-dasharray，stroke-dashoffset和 animation 的属性值达到预期动画效果。