SVGの<path>要素でアイコン間を結ぶ線を描く。d属性でパスの形状を定義する。
d="M 10 50 L 190 50"M(移動)→ L(直線)で水平線を描画
<circle>に<radialGradient>を適用。中心が明るく外側が透明になる「光る点」を作る。
<mask>で光る円をパスの線上だけに表示する。マスクOFFだと円がそのまま見え、ONにするとパスに沿った部分だけが残る。
マスクOFF: 円全体がそのまま表示される
CSSのoffset-pathで移動経路を指定し、offset-distanceで位置を制御(0%〜100%)。@keyframesでアニメーションさせると「光が走る」表現になる。
パスの形状とアニメーションのパターンを変えることで、3つの異なる表現を実現。
1つの光がS字パスに沿って流れる
リクエスト→レスポンスの往復を表現
三角形のパスを時計回りに循環