svgとcssで、動く波を描く

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

波の動きは、スタイルシート（css）のanimationプロパティで、左から右に動くキーフレーム（@keyframes）を指定することで実現しています。各波形毎に、アニメーションの遅延時間（delay）と、持続時間（duration）を少しずつ変えて指定してあります。

更新：2022.11.10