SVG ウェーブ ジェネレーター

波形の区切りは、ページの2つのセクションの間の硬い境界線をやわらげます。このジェネレーターは、1〜4枚の重ね波を1つのSVGとして描きます。高さ、波の大きさ、うねりの数、色を選べ、シード値を使えば結果をいつでも同じように再現できます。ダウンロードできるSVGファイル、HTMLに貼り付けるマークアップ、同じSVGを背景画像として使うCSSルールが得られるので、別のファイルは必要ありません。

使い方

1. レイヤー数、高さ、波の大きさを設定します。
2. 波ごとの点の数を選びます（少ないほど長くゆるやかな波になります）。
3. 色を1つ、またはレイヤーごとに1色選び、波が下側を塗るか上側を塗るかを決めます。
4. 好みの形になるまでシードを変え、マークアップかCSSをコピーするか、SVGをダウンロードします。

計算式

yᵢ = 基準線 + (2r − 1) × 振幅 · 区間 i: C (Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/6) (Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/6) Pᵢ₊₁

rは0〜1のシード付き乱数（mulberry32）なので、同じシードは常に同じ波を描きます。点は3次ベジェ曲線に変換したCatmull-Romスプラインでつながれ、すべての点を通りながら角ができません。

計算例

シード 1、波の大きさ100%、点3個、1440 × 320のキャンバスでは、乱数0.627、0.003、0.527が点の高さを180.3、80.4、164.4に決め、パス M0,180.3 C120,163.7 480,83.1 720,80.4 … ができます。同じ設定で波の大きさが0なら、y = 160の平らな線になります。