svgとjsで、動く波を描く

ベクトル図形（svg）のpath要素で、ベジェ曲線を使って波形パターンのシンボルを作成し、このパターンを４回利用して、波を描いています。

波の動きは、ジャバスクリプトで、ブラウザーの各表示フレーム毎（約17ミリ秒）に、cssのtransoformプロバティの値（translete()）を少しずつ右にずらしながら書き込むことによって実現しています。各波毎に初期位置と、移動速度を少しずつ変えて指定しています。

更新：2022.11.10