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

セクション区切りとして使えるなめらかな SVG ウェーブを作成

ウェーブは、2 つのセクションを区切る最もクリーンな方法の 1 つで、画像を使わずに動き、個性、奥行きをデザインに加えられます。この SVG ウェーブジェネレーターは、<svg> 内に <path> 要素を生成し、width: 100% の任意のコンテナに合わせて伸縮します。

コントロール

• セグメント — 波の山の数。1 セグメントで 1 本の穏やかなカーブ、10 セグメントで激しい上下パターンになります。
• 振幅 — 各山の垂直方向の揺れ。低振幅はさりげない波紋、高振幅は劇的な波形を生成します。
• シード — 山ごとの乱数変化を制御する決定論的整数。再生成 で新しい形状を次々に試せます。
• 反転 — 下部区切り（上に波、下に塗りつぶし）と上部区切り（下に波、上に塗りつぶし）を切り替えます。
• 塗りつぶし — ソリッドカラーまたは角度指定可能な 2 段階線形グラデーション。

出力の使用方法

SVG は preserveAspectRatio="none" を使用しているため、CSS の width を持つコンテナで包めば任意の幅に伸ばせます — 波は高さを保ったままページに合わせて伸縮します。生成された SVG を HTML、React コンポーネント、またはテンプレートシステムに直接貼り付けてください。

<div style="width:100%"><!-- 生成された svg --></div>

一般的な用途

• ヒーローセクションと次のブロックの区切り
• 遊び心のあるフッター
• アニメーション化された背景カーブ（パスは CSS や SMIL でアニメーション可）
• 価格カード、推薦文、機能セクションの背後の装飾シェイプ
• 読み込みプレースホルダーとセクション遷移

パスは決定論的で、同じシードは常に同じ波を生成するため、気に入った形状は安定して保持されます。さらに編集や手動での色調整が必要なら、.svg ファイルとして保存してベクターエディタで開いてください。