Varias líneas = varios <path>
Cada <path> es independiente. Podés darle su propio color,
grosor y animation-range para que aparezcan en momentos distintos del scroll.
/* Cada línea con su propio rango */ .c1 { animation-range: 5% 80%; } .c2 { animation-range: 15% 85%; } .c3 { animation-range: 25% 90%; } .c4 { animation-range: 35% 95%; } /* Línea punteada: dasharray con patrón */ .c4 { stroke-dasharray: 0.04 0.02; } /* ↑ 0.04 de trazo, 0.02 de hueco */
Línea punteada
La línea azul usa stroke-dasharray: 0.04 0.02 — como el path tiene
pathLength="1", los valores son fracciones de 1, no píxeles.
Funciona exactamente igual sin importar el tamaño de la pantalla.