Animations/Flow Lines

Flow Lines

Lignes SVG avec dash animees qui coulent vers un hub central. Style architecture technique.

autoSVGdashworkflowintegration
Trigger: Automatique (boucle)
CSS requis: Oui
Difficulte: medium

Preview live

Code

<svg viewBox={viewBox} fill="none">
  {/* Fond statique */}
  <path d={d} stroke="rgba(221,217,209,0.15)" strokeWidth="1" />
  {/* Dash anime */}
  <path d={d} stroke="rgb(138,132,114)" strokeWidth="1"
    pathLength={100} strokeDasharray="30 100" strokeDashoffset="30"
    className="animate-flow" />
</svg>

CSS requis

@keyframes flow {
  from { stroke-dashoffset: 130; }
  to { stroke-dashoffset: 0; }
}
.animate-flow { animation: flow 3s linear infinite; }

Instructions

Ajoutez le CSS dans votre globals.css. Dupliquez le SVG pour creer plusieurs lignes avec des animationDelay differents. Utilisez des paths SVG courbes (Q, C) pour un effet organique.