spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/stroke-draw/signature-draw.html7  Desc   : A scripted path hand-drawing itself with dashoffset8  ============================================================9-->10<!--svgarden11title: Signature draw12slug: signature-draw13category: stroke-draw14tags: [draw, signature, dashoffset, pathLength]15difficulty: beginner16techniques: [pathLength, stroke-dasharray, stroke-dashoffset, animation-fill-mode]17how_it_works: >18  The classic line-drawing trick: set stroke-dasharray to the path's length so19  the entire stroke is one long gap, then animate stroke-dashoffset from that20  length down to zero — the dash slides into view and the pen appears to write.21  Adding pathLength="100" to the path normalizes its length to 100, so you never22  have to measure real path lengths with getTotalLength().23customizable:24  - { var: "--sg-color",    label: "Ink",   type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Width", type: range, min: 80, max: 360, default: 180, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.8, max: 6, step: 0.1, default: 2.5, unit: s }27created: 2026-08-1028-->29<div class="sg-signature-draw" style="--sg-color:#7F77DD; --sg-size:180px; --sg-duration:2.5s;">30  <svg viewBox="0 0 160 60" aria-hidden="true" focusable="false">31    <path32      pathLength="100"33      d="M12 42 C 18 20, 30 14, 32 26 C 34 38, 22 50, 30 46 C 40 40, 46 22, 52 2834         C 56 32, 52 44, 60 40 C 68 36, 70 24, 78 28 C 84 31, 80 42, 88 3935         C 98 35, 102 26, 112 30 C 120 33, 118 42, 128 38 C 136 34, 142 30, 148 32" />36  </svg>37</div>38<style>39  .sg-signature-draw {40    width: var(--sg-size);41  }42  .sg-signature-draw svg {43    display: block;44    width: 100%;45  }46  .sg-signature-draw path {47    fill: none;48    stroke: var(--sg-color);49    stroke-width: 2.5;50    stroke-linecap: round;51    stroke-dasharray: 100;52    stroke-dashoffset: 100;53    animation: sg-signature-draw-write var(--sg-duration) ease-in-out infinite;54  }55  @keyframes sg-signature-draw-write {56    0%        { stroke-dashoffset: 100; }57    70%, 85%  { stroke-dashoffset: 0; opacity: 1; }58    100%      { stroke-dashoffset: 0; opacity: 0; }59  }60</style>61