SVGの波ディバイダーを作る

やりたいこと

波状のセクション区切りはLPの定番です。エディタで描くと1分、パラメトリックなら数秒で、どんな幅でも滑らかなままです。

パラメータを調整

キャンバスの幅と高さ、波の振幅と数、重ねる層数を設定します。各層は同じ基色で不透明度が段階的に変わります。生成でプレビュー、リロールで別シードを描きます。コピーかダウンロードできます。

• シード値で曲線が決定的になります。同じシードなら同じ波です。
• 幅は4096px・高さは2048pxまで。振幅は高さに対する割合です。

具体例

幅1440・高さ120・波2つ・3層・シード7で、3KBのSVGとしてダウンロードできる控えめな3重曲線のフッター区切りができます。

対応範囲

静的SVGの生成だけです。PNG出力・アニメーション・インタラクションはありません。波は滑らかな正弦風曲線でノイズではありません。出力はページへ貼るマークアップで、ホスティングやCDNリンクはありません。