SVGの3次ベジェでスムーズなウェーブパターンを作成する

Sコマンドによるスムーズウェーブ

ウェーブパターンは交互に並ぶ3次ベジェ曲線を連鎖して構築します。S（滑らかな3次）コマンドは、シームレスな流れのためにコントロールポイントを自動的にミラーリングするため、特にエレガントです。

パス

M 0,50 C 16,10 32,10 50,50 S 84,90 100,50
S 134,10 150,50 S 184,90 200,50

仕組み

最初のセグメントはCを使用して、(0,50)からピークへの初期曲線を定義し、(50,50)の中線に戻ります。後続のSコマンドはそれぞれ前のコントロールポイントを反転し、交互のピークとトラフを作成します。

ウェーブのパラメータ

プロパティ	制御するもの
波長	エンドポイント間の水平距離（ここでは50単位）
振幅	コントロールポイントの中線からの垂直距離（40単位）
位相	Mコマンドの開始xオフセット
中線	エンドポイントが共有するy座標（ここでは50）

ウェーブのアニメーション

CSSで水平方向の動きを追加：

.wave-path {
  animation: wave 2s linear infinite;
}
@keyframes wave {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}

ループがシームレスになるよう、ウェーブパスをビューポートの幅の少なくとも2倍に設定します。

塗りつぶしウェーブ（セクションデバイダー）

ウェーブをセクションデバイダーとして使用するには、パスを延長して閉じたシェイプにします：

M 0,50 C 16,10 32,10 50,50 S 84,90 100,50
S 134,10 150,50 S 184,90 200,50 L 200,100 L 0,100 Z

これは底部でパスを閉じ、塗りつぶされたウェーブ領域を作成します。