CSS-Animation kombiniert mit SVG zur Erzeugung eines Energieflusseffekts

<!-- Der Code ist in React geschrieben und die Durchquerung und einige Codes wurden gelöscht-->

<svg>
    <!-- Eingabeaufforderung zur Werkzeugbeschreibung, wird beim Füllen zum Filtern und für andere Vorgänge verwendet, hier ist das Leuchten an der Unterseite der Kugel-->
    <Definitionen>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style={{ stopColor: "rgba(2,246,255,.5)" }} />
            <stop offset="100%" style={{ stopColor: "rgba(2,246,255,0)" }} />
        </radialGradient>
    </defs>
    <!-- Hier durchlaufen wir N hellblaue Linienpfade d als Pfad-->
    <Pfad d={item.path} Strich="rgba(29,159,167,0.4)" Füllung="transparent" Strichbreite={5}></Pfad>
    ...
    <!-- Hier ist eine leuchtende Kugel, die durch die Überlagerung zweier Kreise entsteht-->
    <g>
        <circle cx={cx} cy={cy} r="15" fill="url(#grad1)"></circle>
        <Kreis cx={cx} cy={cy} r="5" fill="rgba(2,246,255)"></Kreis>
    </g>
</svg>

<!-- Hier müssen wir sicherstellen, dass die Box und die SVG-Box ausgerichtet sind und die gleiche Breite und Höhe haben, damit die Pfadpunkte konsistent sind-->
<div Klassenname={styles.animate}>
    <!-- Hier durchlaufen wir N Divs und lassen jedes Div entsprechend dem OffsetPath fließen, der der Wert von d im Pfad in SVG ist -->
    <!-- Ein negatives „animationDelay“ bedeutet, dass es vor dem Rendern ausgeführt wird, sodass der gesamte Pfad während des Renderns abgedeckt werden kann-->
    <div key={index} className={styles.point3} style={{ "offsetPath": "Pfad('M 105 34 L 5 34')", "animationDelay": `-${index * 1}s`, "animationDuration": '5s', 'animationPlayState': `${stop ? 'paused' : 'running'}` }}></div>
    ...
</div>

.Punkt3 {
    Breite: 10px;
    Höhe: 2px;
    // Offset-Pfad: Pfad('M 248 108 L 248 172 L 1510 172');
    Offset-Distanz: 0 %;
    Animation: Fluss 20 s linear normal unendlich;
    Hintergrundbild: linearer Farbverlauf (nach rechts, rgba (255, 255, 255, 0) 10 %, #FEFE02);
    Position: absolut;
    links: 0;
    rechts: 0;
}
}

@Keyframes-Fluss {
    aus {
        Offset-Distanz: 0 %;
    }

    Zu {
        Offset-Distanz: 100 %;
    }
}