🌊 SVG波形背景生成ツール

Webのセクション同士を滑らかにつなぐ波形のSVGを、色・高さ・うねり・波の数を調整するだけですぐに作れるツールです。preserveAspectRatioの設定で画面幅に合わせて伸びるため、レスポンシブなランディングページのセクション区切りとしてそのまま使えます。

使い方

1. 高さ・うねり（振幅）・波の数のスライダーで好みの曲線を作ります。
2. 色と透明度を選び、必要なら「上下反転」で向きを反転させます。
3. プレビューを確認して「SVGをコピー」ボタンを押します。
4. セクションの上または下にSVGコードを貼り付けて区切りとして使います。

よくある質問

入力した内容はサーバーに送信されますか？

いいえ。色や数値の調整とSVGコードの生成はすべてブラウザ内だけで行われ、どんなデータもサーバーに送信・保存されません。

作った波は画面サイズに合わせて伸びますか？

はい。生成されるSVGにはwidth=100%とpreserveAspectRatio=noneが含まれているので、親要素の幅に合わせて横に自然に伸びます。高さは指定した値のまま保たれます。

色をグラデーションで塗れますか？

現在は単色塗りに対応しています。グラデーションが必要な場合は、コピーしたSVGのfill属性の代わりに<defs>にlinearGradientを定義し、pathのfillをそのidに変えればできます。