SVG Path con Scroll

M — MoveTo

El punto de inicio del path. M 0,50 empieza en el centro izquierdo.

C — Curva Bézier cúbica

C cx1,cy1 cx2,cy2 x,y
Dos puntos de control + destino. Los puntos de control "jalan" la curva.

stroke-dasharray

Define el patrón de guiones. Ponlo igual a la longitud total del path para "ocultar" toda la línea.

stroke-dashoffset

Desplaza el patrón. En 100% el dash está corrido → línea invisible. En 0 → visible.

animation-timeline: scroll()

Conecta la animación al scroll. El navegador controla el progreso automáticamente.

// El código completo

/* HTML */
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
  <path
    class="curve"
    d="M 0,50
       C 15,10  35,90  50,50
       C 65,10  85,90  100,50"
  />
</svg>

/* CSS */
.curve {
  fill: none;
  stroke: #00ffaa;
  stroke-width: 2.5;
  stroke-linecap: round;

  /* Paso 1: medir la longitud con JS */
  stroke-dasharray: var(--path-len);
  stroke-dashoffset: var(--path-len); /* empieza invisible */

  /* Paso 2: animar a 0 */
  animation: draw linear;
  animation-timeline: scroll(root);
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* JS — medir longitud real del path */
const path = document.querySelector('.curve');
const len  = path.getTotalLength();
path.style.setProperty('--path-len', len);