Cercles colores qui voyagent le long de paths SVG. Variante dynamique des flow-lines.
<svg viewBox={viewBox} fill="none">
<path d={d} stroke="rgba(221,217,209,0.15)" strokeWidth="1" />
<path id={pathId} d={d} fill="none" stroke="none" />
<circle r="4" fill="#E1FF6C">
<animateMotion dur="3s" repeatCount="indefinite" begin={delay} calcMode="linear">
<mpath href={`#${pathId}`} />
</animateMotion>
</circle>
</svg>@keyframes flow {
from { stroke-dashoffset: 130; }
to { stroke-dashoffset: 0; }
}
.animate-flow { animation: flow 3s linear infinite; }Variante de flow-lines avec des cercles colores qui voyagent le long des paths. Chaque cercle a un 'begin' (delay) different pour un effet stagger. Combinez avec les dash animes pour un double effet.