SVGで波形のアニメーションを簡単に実装する

まずはサンプルから。これはちょっと応用して、波を複数重ねたり、blend-modeを使ってます。
簡単な実装の考え方を書いた後に、シンプルなパターンも下の方に貼っておきます。

実装方法

実装方法の考え方は以下の通りです。

• viewBoxの横幅いっぱい(100%)に波の形状を作る
• その波形をviewBoxをはみ出して、もう一つ作る（200%分）
• CSSアニメーションでviewBox内のpath をtransform: translateX(-100%) で左に100%動かす
  • 左に100%動かすとちょうど2つ目の波形の右端まで移動する
• そのアニメーションを infinite で無限に繰り返す

波形の作り方

以下のようなsvgを作ります。

• viewBox は以下の例だと、 横 : 縦 が 12 : 1.8 の画像を作ってると思ってください。
• pathについて
  • X 座標は 30 おきに指定してます。
  • 30 おきに Y 座標の位置を指定することで波線を表現しています。
  • なので基本的には Y 座標の方を変更して、波の高さを調整してください。
  • 注意点としては 0 は下ではなく、viewBox の上です。
• SVG の左端(0)の高さと右端(240)の Y 座標は揃っていないと、途切れてるように見えてしまいます。

<svg viewBox="0 0 120 18" class="svg-wave">
  <path
    class="wave"
    d="M 0,0 C 30,0 30,5 60,5 90,5 90,0 120,0 150,0 150,5 180,5 210,5 210,0 240,0 v 28 h -240 z"
  />
</svg>

アルファベットの意味は以下です。 気になったら調べてください

• M・・・開始点
• C・・・開始点から終点までのベジェ曲線を描く
• z・・・終点

参考 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d 

CSSアニメーション

波形ができれば後はアニメーションさせるだけです。
path に指定している .wave に対してアニメーションを指定すると、波打ってるように見えます。

.wave {
  animation: wave 3s cubic-bezier(0.55, 0.5, 0.45, 0.5);
  animation-iteration-count: infinite;
  fill: #000;
}

@keyframes wave {
  100% {
    transform: translateX(-100%);
  }
}

シンプルな波

最後にシンプルな波のサンプルです。