SVG Beam Demo

Step 1

SVG path(ベースラインを描く)

SVGの<path>要素でアイコン間を結ぶ線を描く。d属性でパスの形状を定義する。

d="M 10 50 L 190 50"

M(移動)→ L(直線)で水平線を描画

strokeWidth1
Step 2

radialGradient(光る点を作る)

<circle><radialGradient>を適用。中心が明るく外側が透明になる「光る点」を作る。

r(半径)15
Step 3

mask(パスの形に切り抜く)

<mask>で光る円をパスの線上だけに表示する。マスクOFFだと円がそのまま見え、ONにするとパスに沿った部分だけが残る。

マスクOFF: 円全体がそのまま表示される

Step 4

offset-path(パスに沿って動かす)

CSSのoffset-pathで移動経路を指定し、offset-distanceで位置を制御(0%〜100%)。@keyframesでアニメーションさせると「光が走る」表現になる。

offset-distance0%
Step 5

すべてを組み合わせる

パスの形状とアニメーションのパターンを変えることで、3つの異なる表現を実現。

Frontend(S字カーブ)

1つの光がS字パスに沿って流れる

Backend(往復)

リクエスト→レスポンスの往復を表現

Infrastructure(三角循環)

三角形のパスを時計回りに循環