Sketch underline

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/stroke-draw/underline-sketch.html
  Desc   : Sketchy hand-drawn underline that draws itself on load
  ============================================================
-->
<span class="sg-underline-sketch" style="--sg-color:#7F77DD; --sg-size:26px; --sg-duration:0.9s;">
  emphasis, hand-drawn
  <svg viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path
      pathLength="100"
      d="M4 8 C 40 4, 80 5, 118 6 C 150 7, 178 6, 196 5 C 170 8, 120 9, 70 10 C 45 10.5, 20 10, 8 9" />
  </svg>
</span>
<style>
  .sg-underline-sketch {
    position: relative;
    display: inline-block;
    font-size: var(--sg-size);
    font-weight: 600;
    padding-bottom: 0.3em;
  }
  .sg-underline-sketch svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.35em;
    overflow: visible;
  }
  .sg-underline-sketch path {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sg-underline-sketch-draw var(--sg-duration) ease-out 0.3s forwards;
  }
  @keyframes sg-underline-sketch-draw {
    to { stroke-dashoffset: 0; }
  }
</style>