spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text/text-stroke-reveal.html7  Desc   : Outlined text that traces itself, then fills with color8  ============================================================9-->10<!--svgarden11title: Stroke-reveal text12slug: text-stroke-reveal13category: text14tags: [text, outline, dashoffset, reveal]15difficulty: intermediate16techniques: [svg-text-stroke, stroke-dasharray, fill-opacity, animation-choreography]17how_it_works: >18  stroke-dasharray works on <text> too — each glyph's outline is a path, so the19  same dash trick that draws lines can trace letterforms. Because every glyph20  has a different outline length, one shared dasharray makes them finish at21  slightly different moments, which reads as pleasantly hand-made rather than22  mechanical. Once the trace is mostly done, a second phase of the same23  keyframe fades fill-opacity in to "ink" the letters.24customizable:25  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }26  - { var: "--sg-size",     label: "Width", type: range, min: 120, max: 420, default: 240, unit: px }27  - { var: "--sg-duration", label: "Speed", type: range, min: 1.5, max: 8, step: 0.5, default: 4, unit: s }28created: 2026-08-1029-->30<div class="sg-text-stroke-reveal" style="--sg-color:#7F77DD; --sg-size:240px; --sg-duration:4s;">31  <svg viewBox="0 0 240 60" aria-hidden="true" focusable="false">32    <text x="120" y="42">SVGarden</text>33  </svg>34</div>35<style>36  .sg-text-stroke-reveal {37    width: var(--sg-size);38  }39  .sg-text-stroke-reveal svg {40    display: block;41    width: 100%;42  }43  .sg-text-stroke-reveal text {44    font-family: inherit;45    font-size: 44px;46    font-weight: 700;47    letter-spacing: 1px;48    text-anchor: middle;49    fill: var(--sg-color);50    fill-opacity: 0;51    stroke: var(--sg-color);52    stroke-width: 1.2;53    stroke-dasharray: 220;54    stroke-dashoffset: 220;55    animation: sg-text-stroke-reveal-ink var(--sg-duration) ease-in-out infinite;56  }57  @keyframes sg-text-stroke-reveal-ink {58    0%        { stroke-dashoffset: 220; fill-opacity: 0; }59    55%       { stroke-dashoffset: 0;   fill-opacity: 0; }60    70%, 88%  { stroke-dashoffset: 0;   fill-opacity: 1; }61    100%      { stroke-dashoffset: 0;   fill-opacity: 0; }62  }63</style>64