Рисующиеся буквы

Контуры букв дорисовываются штрихом, затем проявляется заливка.

«Повторить» — в углу.

Код

<svg viewBox="0 0 900 200" class="draw-text">
  <text x="450" y="150" text-anchor="middle">ТЕКСТ</text>
</svg>

<style>
.draw-text text {
  font: 800 160px sans-serif;
  fill: transparent;                    /* сначала только контур */
  stroke: #E84B16; stroke-width: 2;
  stroke-dasharray: 600;                /* больше длины любого штриха */
  stroke-dashoffset: 600;
}
.draw-text.play text {
  animation: draw 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes draw {
  0%   { stroke-dashoffset: 600; fill: transparent; }
  60%  { stroke-dashoffset: 0; fill: transparent; }   /* контур дорисован */
  100% { stroke-dashoffset: 0; fill: #fff;
         stroke: transparent; }                        /* заливка проявилась */
}
</style>

Промпт для ИИ

Сделай рисующиеся буквы: SVG <text> с fill:transparent и stroke акцентного цвета; stroke-dasharray/dashoffset = 600 (больше длины самого длинного штриха буквы). Анимация: к 60% offset уходит в 0 (контуры дорисовываются), к 100% проявляется fill и исчезает stroke. Длительность ~2.6s, запуск по появлению. Шрифт жирный — контуры выразительнее.