svgでバウンドするアニメーションを作ってみた続き

前回，x座標とy座標とを往復させることで壁面でバウンドする様を表現してみたので，これを更に拡張してみた．line要素は始点と終点の2つの座標で確定するので，これらに別の動作をさせたら面白いと考えて実装したものがコレ．






複数の同じlineを時間差でアニメーションさせることで残像っぽい動きを表現している．一つだけだと面白くなかったので，use要素で全体をコピーして90度づつ回転して配置したらなかなかカッコイイ．