CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

<!-- コードは react で書かれており、トラバーサルと一部のコードは削除されています -->

<svg>
    <!-- ツールの説明プロンプト。フィルタリングやその他の操作の塗りつぶしに使用されます。ボールの下部の輝きはここにあります -->
    <定義>
        <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)" }} />
        </放射状グラデーション>
    </defs>
    <!-- ここでは、N 本の水色の線のパス d をパスとしてトラバースします -->
    <path d={item.path} ストローク="rgba(29,159,167,0.4)" 塗りつぶし="透明" ストローク幅={5}></path>
    ...
    <!-- 2 つの円を重ねて形成された光るボールです -->
    <g>
        <circle cx={cx} cy={cy} r="15" fill="url(#grad1)"></circle>
        <circle cx={cx} cy={cy} r="5" fill="rgba(2,246,255)"></circle>
    </g>
</svg>

<!-- ここでは、パス ポイントが一貫しているように、ボックスと SVG ボックスが同じ幅と高さで揃っていることを確認する必要があります -->
<div className={styles.animate}>
    <!-- ここでは N 個の div をトラバースし、各 div を offsetPath (SVG のパスの d の値) に従ってフローさせます -->
    <!-- 負の animationDelay はレンダリング前に実行されることを意味し、レンダリング中にパス全体をカバーできます -->
    <div key={index} className={styles.point3} style={{ "offsetPath": "path('M 105 34 L 5 34')", "animationDelay": `-${index * 1}s`, "animationDuration": '5s', 'animationPlayState': `${stop ? 'paused' : 'running'}` }}></div>
    ...
</div>

.point3 {
    幅: 10px;
    高さ: 2px;
    // オフセットパス: path('M 248 108 L 248 172 L 1510 172');
    オフセット距離: 0%;
    アニメーション: フロー 20 秒 線形 法線 無限;
    背景画像: 線形グラデーション(右へ、rgba(255, 255, 255, 0) 10%、#FEFE02);
    位置: 絶対;
    左: 0;
    右: 0;
}
}

@keyframesフロー{
    から {
        オフセット距離: 0%;
    }

    に {
        オフセット距離: 100%;
    }
}