SVG波ジェネレーター
無料オンラインのSVG波ジェネレーター。1〜5層のなめらかな波を重ね、基準線・振幅・波長・滑らかさを調整し、2色グラデーションを適用してベクターコードを書き出せます。
SVG波ジェネレーターは何をしてくれる？
装飾的な波の形を、そのまま使えるSVGコードとして生成します。1〜5層を重ねられ、各レイヤーに基準線の高さ・振幅・波長・滑らかさを個別に設定でき、全レイヤーが2色の線形グラデーションを共有します。
波のカーブはどう描かれている？
各レイヤーは内蔵のパス生成器が作成します。波を半波長ごとのセグメントに分割し、各セグメントを3次ベジェの制御点で描画します。ファイルは極小で、どのズーム率でも完全に滑らかです。
滑らかさスライダーは何を変える？
0%ではセグメントが直線になり波はジグザグに見えます。上げるほどベジェの制御点が外側に移動し、100%で完全なサイン波状のカーブになります。
書き出したSVGはどこで使える？
HTMLやSVGが使える場所ならどこでも：ヒーロー背景、セクション間の区切り、フッター、プレゼン、デザインツールなど。コピーしたコードをHTMLにそのまま貼るか、ダウンロードボタンで.svgファイルを保存してください。
波はどんなサイズでも鮮明？
はい。書き出しには1440x480のviewBoxが保持され、純粋なベクター形状です。ページ幅いっぱいに伸ばしても印刷サイズに拡大しても、曲線がにじんだり粗くなったりしません。
ランダム生成ボタンの仕組みは？
1〜5のレイヤー数、各パラメータの新しいランダム値、調和のとれた2つのランダム色を選び、プレビューを即座に描き直します。気に入るまで何度でも押せます。
ブランドカラーは使える？
使えます。2つのカラーピッカーは全レイヤーが共有する線形グラデーションの始点と終点を決めるので、変えるだけで波全体の色が一度に変わります。
データはサーバーに送られる？
いいえ。ジェネレーターはプレーンなJavaScriptだけでブラウザ内で完結します。色や設定がページの外に出ることはなく、書き出しファイルも端末内で生成されます。
SVG波ジェネレーターの使い方
SVG波ジェネレーターは、そのまま貼り付けられるクリーンな SVG コードとして、レイヤー状の波形を作成します。各レイヤーは共有の 2 色線形グラデーションで塗られた滑らかな三次ベジェ曲線で、ヒーローセクションの背景、ページ区切り、フッター装飾に最適です。すべてブラウザー内で生成され、アップロードは一切ありません。
- 「レイヤー数」セレクターでレイヤーの数（1〜5）を選びます。レイヤーは奥から手前に描画されるため、新しいレイヤーほど手前に重なります。
- 2 つのカラーピッカーでグラデーションの開始色と終了色を選びます。全レイヤーがこの線形グラデーションを共有します。
- 各レイヤーを 4 つのスライダーで微調整します。「ベースラインの高さ」は波を上下に移動し、「振幅」は山の高さ、「波長」は山どうしの横方向の間隔を制御、「滑らかさ」は直線のジグザグ（0%）から完全な正弦波状の三次ベジェ曲線（100%）までをブレンドします。
- 「ランダム生成」を押すと、レイヤー数・形状・色の新しい組み合わせが瞬時に生まれます。納得いくまで何度でも。
- 「SVG をダウンロード」で .svg ファイルを保存するか、「ソースをコピー」で完全な SVG マークアップをクリップボードへ。任意の HTML ファイルやデザインツールにそのまま貼り付けられます。
ウェブサイトのセクション区切りには、SVG を 2 つのブロックの間に置いて幅 100% に伸ばしましょう。viewBox がどんなサイズでも曲線を歪めず保ちます。滑らかさを下げて波長を短くすると手描き風になり、滑らかさ最大で波長を長くすると穏やかな海のようになります。
関連ツール
- SVG最適化ツール ブラウザでSVGファイルを即座に最適化・圧縮。メタデータ、コメント、エディターの不要データを削除し、ファイルサイズを最大60%削減。
- SVGからPNG変換ツール SVGをPNG、JPEG、WebPにブラウザで即変換。スケール、サイズ、背景色をカスタマイズ可能。無料、プライバシー保護、アップロード不要。
- PNG SVG変換ツール 無料オンラインのPNG SVG変換ツール。PNGやJPGなどのビットマップを、色数やディテールを調整しながらスケーラブルなベクターSVGに変換。すべてブラウザ内で完結します。
- border-radius ジェネレーター 無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS イージング ジェネレーター 無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
- CSS テキストシャドウ ジェネレーター 無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
- CSS clip-path ジェネレーター 無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。