spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/stroke-draw/underline-sketch.html7  Desc   : Sketchy hand-drawn underline that draws itself on load8  ============================================================9-->10<!--svgarden11title: Sketch underline12slug: underline-sketch13category: stroke-draw14tags: [draw, underline, text-decoration, on-load]15difficulty: beginner16techniques: [pathLength, stroke-dashoffset, inline-svg-in-text, animation-fill-mode]17how_it_works: >18  The underline is a wobbly two-pass path (it doubles back on itself like a real19  pen stroke) positioned under the text with an absolutely-placed SVG. It draws20  once on load using the dasharray/dashoffset reveal, and animation-fill-mode:21  forwards keeps the finished stroke on screen instead of snapping back to the22  first keyframe when the animation ends.23customizable:24  - { var: "--sg-color",    label: "Ink",       type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Font size", type: range, min: 14, max: 48, default: 26, unit: px }26  - { var: "--sg-duration", label: "Speed",     type: range, min: 0.3, max: 3, step: 0.1, default: 0.9, unit: s }27created: 2026-08-1028-->29<span class="sg-underline-sketch" style="--sg-color:#7F77DD; --sg-size:26px; --sg-duration:0.9s;">30  emphasis, hand-drawn31  <svg viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true" focusable="false">32    <path33      pathLength="100"34      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" />35  </svg>36</span>37<style>38  .sg-underline-sketch {39    position: relative;40    display: inline-block;41    font-size: var(--sg-size);42    font-weight: 600;43    padding-bottom: 0.3em;44  }45  .sg-underline-sketch svg {46    position: absolute;47    left: 0;48    bottom: 0;49    width: 100%;50    height: 0.35em;51    overflow: visible;52  }53  .sg-underline-sketch path {54    fill: none;55    stroke: var(--sg-color);56    stroke-width: 2.5;57    stroke-linecap: round;58    vector-effect: non-scaling-stroke;59    stroke-dasharray: 100;60    stroke-dashoffset: 100;61    animation: sg-underline-sketch-draw var(--sg-duration) ease-out 0.3s forwards;62  }63  @keyframes sg-underline-sketch-draw {64    to { stroke-dashoffset: 0; }65  }66</style>67