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

Q: 同じ波をもう一度得られますか？

はい。同じ設定と**シード**からは、常に同一のSVGマークアップが生成されます。

Q: セクションの上側に波を置くには？

**位置**を**上**に設定します。パスが上端まで閉じられ、上方向に塗りつぶされます。

なめらか・ギザギザ・階段状のSVGウェーブを、レイヤー数・振幅・シードを指定して生成。.svgで保存、またはセクション区切り用のCSS背景data URIとしてコピーできます。

ウェーブ設定

色

ウェーブのスタイル

位置

複雑さ（分割数）

振幅%

レイヤー

不透明度

幅px

高さpx

シード

同じ設定とシードからは常に同じ形が生成されます。

プレビュー

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>

CSS 背景（data URI）

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");

SVGウェーブジェネレーターとは？

セクション区切りや背景に使う波形をSVGで作成します。なめらかな曲線、鋭いピーク、階段状から選び、最大5層まで重ねたり、上側に反転したりでき、.svgファイルまたはそのまま貼り付けられるCSSのbackground-image data URIとして出力できます。

SVGウェーブジェネレーターの使い方

色、ウェーブのスタイル（なめらか、ギザギザ、階段状）、位置（下または上）を選びます。
複雑さ（分割数）、振幅、レイヤー、不透明度、幅、高さを調整します。
ランダム生成をクリックするかシードを入力すると、毎回異なるが再現可能な波が得られます。
.svg をダウンロードするか、SVG コードをコピーします。
またはCSS 背景（data URI）をコピーすれば、別ファイルなしで波を使えます。

例

入力

Complexity 2, amplitude 0, 1440×320, color #0099ff

出力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>

振幅0では直線になり、ベジェ曲線の構成そのものを確認できます。

SVGウェーブジェネレーターを使うべき場面

波状のセクション区切り、フッター、ヒーロー背景に便利です。preserveAspectRatio="none"により任意の幅に引き伸ばされるため、全幅の区切りに向いています。縦横比を保ちたいイラストの場合は、ベクターエディタでSVGを編集してください。

SVGウェーブジェネレーターの仕組み

幅を等間隔のセグメントに分割し、各点の高さを基準線にシード付き擬似乱数（mulberry32）のオフセットを振幅でスケールして加えたものにします。なめらかな波は各点を通るCatmull-Romスプラインを三次ベジェのCコマンドに変換し、ギザギザは直線、階段状は水平線と垂直線で構成します。パスは下端（または上端）まで閉じられます。複数レイヤーは異なる基準線とシードを使い、手前ほど不透明度が高くなります。data URIはSVGを読みやすいまま保ち、安全でない文字だけをパーセントエンコードします。