SVG ウェーブ生成ツール

SVG ウェーブ生成ツールとは？

SVG ウェーブ生成ツールは、パスを手書きせずに滑らかで有機的な波の区切り線やヒーロー背景を作りたいウェブデザイナー・フロントエンド開発者向けの無料ブラウザツールです。曲線の強さを設定し、1〜8 レイヤーを重ね、波の山を下向き／上向きに反転させ、単色のブレンドまたは 2 つの HEX 色による縦グラデーションで塗ります。各波はシードベースの擬似乱数で描かれるため、「再生成」を押すと同じ設定のまま新しい形が得られ、出力は任意のサイズに拡大しても崩れない正確な SVG で、HTML ページやデザインファイルにそのまま貼り付けられます。セクションの区切り、フッター、バナー、装飾背景などに使えます。

SVG ウェーブ生成ツールの使い方

1. 曲線の強さを 0〜100 で設定し、波の山の高さと迫力を調整します。
2. レイヤー数（1〜8）を選びます。レイヤーが多いほど半透明の波が重なり奥行きが出ます。
3. 「反転」で波の山を下向きまたは上向きにします。
4. 「設定」を開いて単色塗りと縦グラデーションを切り替え、開始色と終了色を選びます。
5. 「再生成」を押して、気に入る形になるまで波形を組み替えます。
6. SVG マークアップをコピーするか、「ダウンロード」をクリックして wave.svg ファイルを保存します。

使用例

よくある質問

曲線の強さは何を変えますか？

強さ（0〜100）は各波の山がどれだけ上下するかを制御します。低い値は穏やかなさざ波、高い値は高く迫力ある山になります。変更に合わせてプレビューと SVG が即座に更新されます。

「再生成」を押すと形が変わるのはなぜ？

各波はシードベースの擬似乱数で描かれます。再生成はシードを 1 増やし、強さ・レイヤー・色・塗りはそのままに、新しい山の配置を得られます。

単色とグラデーション塗りの違いは？

単色は重なった各レイヤーを 2 色の間でブレンドし、グラデーションはすべてのレイヤーに上の 1 色目から下の 2 色目への縦グラデーションを 1 つ適用します。「設定」で切り替え、両方の色を選べます。

ダウンロードした SVG はどう使いますか？

出力は標準的で拡大縮小可能な SVG マークアップです。HTML に直接コピーするか、wave.svg をダウンロードしてデザインツールに読み込んだり画像として参照したりできます。ベクター形式なのでどのサイズでも鮮明です。

サーバーに何かアップロードされますか？

いいえ。波はローカルの計算でブラウザ内だけで生成され、.svg のダウンロードもメモリ上の blob から作られます。設定・色・画像が端末から出ることは一切ないため、オフラインでも動作し、作業内容のプライバシーが保たれます。