Signature draw

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/stroke-draw/signature-draw.html
  Desc   : A scripted path hand-drawing itself with dashoffset
  ============================================================
-->
<div class="sg-signature-draw" style="--sg-color:#7F77DD; --sg-size:180px; --sg-duration:2.5s;">
  <svg viewBox="0 0 160 60" aria-hidden="true" focusable="false">
    <path
      pathLength="100"
      d="M12 42 C 18 20, 30 14, 32 26 C 34 38, 22 50, 30 46 C 40 40, 46 22, 52 28
         C 56 32, 52 44, 60 40 C 68 36, 70 24, 78 28 C 84 31, 80 42, 88 39
         C 98 35, 102 26, 112 30 C 120 33, 118 42, 128 38 C 136 34, 142 30, 148 32" />
  </svg>
</div>
<style>
  .sg-signature-draw {
    width: var(--sg-size);
  }
  .sg-signature-draw svg {
    display: block;
    width: 100%;
  }
  .sg-signature-draw path {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sg-signature-draw-write var(--sg-duration) ease-in-out infinite;
  }
  @keyframes sg-signature-draw-write {
    0%        { stroke-dashoffset: 100; }
    70%, 85%  { stroke-dashoffset: 0; opacity: 1; }
    100%      { stroke-dashoffset: 0; opacity: 0; }
  }
</style>