Рисующаяся линия

SVG-росчерк рисуется прокруткой через stroke-dashoffset — в обе стороны.

Скрольте сквозь сцену.

линия рисуется прокруткой — вперёд и назад

Код

<svg viewBox="0 0 900 300" fill="none">
  <path class="line" d="M20 220 C 140 80 ..." stroke="#E84B16" stroke-width="4"/>
</svg>

<script>
var path = document.querySelector(".line");
var len = path.getTotalLength();
path.style.strokeDasharray = len;      // штрих длиной с весь путь
path.style.strokeDashoffset = len;     // полностью «стёрт»

// вариант А: рисовать по прогрессу sticky-сцены (0..1)
function loop() {
  var p = /* прогресс скролла 0..1 */ 0;
  path.style.strokeDashoffset = (1 - p) * len;
  requestAnimationFrame(loop);
}

// вариант Б: одноразово по появлению
// path.style.transition = "stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)";
// new IntersectionObserver(...).observe(path)  ->  strokeDashoffset = 0
</script>

Промпт для ИИ

Сделай рисующуюся SVG-линию: у path взять getTotalLength(), выставить stroke-dasharray = длина и stroke-dashoffset = длина (линия стёрта). Рисование: либо от прогресса sticky-сцены offset = (1-p)*len (линия рисуется скроллом в обе стороны), либо одноразово по IntersectionObserver с transition 1.6s cubic-bezier(0.16,1,0.3,1) к offset 0. Для глубины положи под неё ту же линию серым.