Stroke-reveal text

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text/text-stroke-reveal.html
  Desc   : Outlined text that traces itself, then fills with color
  ============================================================
-->
<div class="sg-text-stroke-reveal" style="--sg-color:#7F77DD; --sg-size:240px; --sg-duration:4s;">
  <svg viewBox="0 0 240 60" aria-hidden="true" focusable="false">
    <text x="120" y="42">SVGarden</text>
  </svg>
</div>
<style>
  .sg-text-stroke-reveal {
    width: var(--sg-size);
  }
  .sg-text-stroke-reveal svg {
    display: block;
    width: 100%;
  }
  .sg-text-stroke-reveal text {
    font-family: inherit;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 1px;
    text-anchor: middle;
    fill: var(--sg-color);
    fill-opacity: 0;
    stroke: var(--sg-color);
    stroke-width: 1.2;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: sg-text-stroke-reveal-ink var(--sg-duration) ease-in-out infinite;
  }
  @keyframes sg-text-stroke-reveal-ink {
    0%        { stroke-dashoffset: 220; fill-opacity: 0; }
    55%       { stroke-dashoffset: 0;   fill-opacity: 0; }
    70%, 88%  { stroke-dashoffset: 0;   fill-opacity: 1; }
    100%      { stroke-dashoffset: 0;   fill-opacity: 0; }
  }
</style>