デザイン・Web制作

SVG Wave Generator (波形セクション区切り)

Webサイトのヒーロー下やフッター上に使える波形SVGをブラウザで生成。振幅・周波数・位相・2色グラデーション・左右反転に対応。12種プリセット、SVG/PNGダウンロード、SVG/CSSコピーが可能。

登録不要
生成した波形プレビュー

プリセット

12種

パラメータ

40px
1.50
0rad
320px
160px
16
塗り方向と反転

色

90°

コピーとダウンロード

SVGソース
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none" role="img" aria-label="波形セクション区切り"><title>波形セクション区切り</title><defs><linearGradient id="waveGrad-4f46e5-8b5cf6-90-00" x1="50.00%" y1="0.00%" x2="50.00%" y2="100.00%"><stop offset="0%" stop-color="#4f46e5"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs><path d="M 0 160.00 C 30.00 167.85, 60.00 175.69, 90.00 182.22 C 120.00 188.75, 150.00 193.95, 180.00 196.96 C 210.00 199.96, 240.00 200.76, 270.00 199.23 C 300.00 197.70, 330.00 193.84, 360.00 188.28 C 390.00 182.73, 420.00 175.51, 450.00 167.80 C 480.00 160.10, 510.00 151.95, 540.00 144.69 C 570.00 137.44, 600.00 131.10, 630.00 126.74 C 660.00 122.38, 690.00 120.00, 720.00 120.00 C 750.00 120.00, 780.00 122.38, 810.00 126.74 C 840.00 131.10, 870.00 137.44, 900.00 144.69 C 930.00 151.95, 960.00 160.10, 990.00 167.80 C 1020.00 175.51, 1050.00 182.73, 1080.00 188.28 C 1110.00 193.84, 1140.00 197.70, 1170.00 199.23 C 1200.00 200.76, 1230.00 199.96, 1260.00 196.96 C 1290.00 193.95, 1320.00 188.75, 1350.00 182.22 C 1380.00 175.69, 1410.00 167.85, 1440.00 160.00 L 1440 320 L 0 320 Z" fill="url(#waveGrad-4f46e5-8b5cf6-90-00)"/></svg>
CSSスニペット（background-image）
.section-divider {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20width%3D%221440%22%20height%3D%22320%22%20preserveAspectRatio%3D%22none%22%20role%3D%22img%22%20aria-label%3D%22%E6%B3%A2%E5%BD%A2%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%8C%BA%E5%88%87%E3%82%8A%22%3E%3Ctitle%3E%E6%B3%A2%E5%BD%A2%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%8C%BA%E5%88%87%E3%82%8A%3C%2Ftitle%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22waveGrad-4f46e5-8b5cf6-90-00%22%20x1%3D%2250.00%25%22%20y1%3D%220.00%25%22%20x2%3D%2250.00%25%22%20y2%3D%22100.00%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234f46e5%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238b5cf6%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%200%20160.00%20C%2030.00%20167.85%2C%2060.00%20175.69%2C%2090.00%20182.22%20C%20120.00%20188.75%2C%20150.00%20193.95%2C%20180.00%20196.96%20C%20210.00%20199.96%2C%20240.00%20200.76%2C%20270.00%20199.23%20C%20300.00%20197.70%2C%20330.00%20193.84%2C%20360.00%20188.28%20C%20390.00%20182.73%2C%20420.00%20175.51%2C%20450.00%20167.80%20C%20480.00%20160.10%2C%20510.00%20151.95%2C%20540.00%20144.69%20C%20570.00%20137.44%2C%20600.00%20131.10%2C%20630.00%20126.74%20C%20660.00%20122.38%2C%20690.00%20120.00%2C%20720.00%20120.00%20C%20750.00%20120.00%2C%20780.00%20122.38%2C%20810.00%20126.74%20C%20840.00%20131.10%2C%20870.00%20137.44%2C%20900.00%20144.69%20C%20930.00%20151.95%2C%20960.00%20160.10%2C%20990.00%20167.80%20C%201020.00%20175.51%2C%201050.00%20182.73%2C%201080.00%20188.28%20C%201110.00%20193.84%2C%201140.00%20197.70%2C%201170.00%20199.23%20C%201200.00%20200.76%2C%201230.00%20199.96%2C%201260.00%20196.96%20C%201290.00%20193.95%2C%201320.00%20188.75%2C%201350.00%20182.22%20C%201380.00%20175.69%2C%201410.00%20167.85%2C%201440.00%20160.00%20L%201440%20320%20L%200%20320%20Z%22%20fill%3D%22url(%23waveGrad-4f46e5-8b5cf6-90-00)%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
このツールについて問い合わせる →

SVG Wave Generator (波形セクション区切り)について

SVG Wave Generator とは

Webサイトのセクション境界に使う波形をブラウザ上で作成するツールです。振幅・周波数・位相・高さ・塗り方向・色を調整し、SVGとPNGをダウンロードできます。HTMLへ貼り付けるSVGコードと、CSSのbackground-image用Data URLもコピーできます。

波は y(x) = baseline + amplitude × sin(2π × (x/width) × frequency + phase) を、4〜64区間の三次ベジエ曲線で近似しています。区間端の傾きを使って曲線を接続しますが、サンプル数が少ない場合や周波数が高い場合は正弦波との誤差が大きくなります。

入力内容と生成処理はブラウザ内で完結し、波形データをサーバーへ送信・保存しません。

使い方

  1. 12種のプリセットから近い形を選ぶか、各パラメータを直接調整する
  2. 振幅で上下の変化量、周波数で横幅内の波数、位相で開始位置を調整する
  3. 波の中心Yと高さを調整し、「下を塗る」または「上を塗る」を選ぶ
  4. 単色または2色グラデーションを選び、必要に応じて左右反転する
  5. 「SVGをコピー」「CSSをコピー」、またはSVG・PNGのダウンロードを選ぶ

出力幅は1440px固定、高さは80〜600px、振幅は0〜150px、周波数は0.25〜5、サンプル数は4〜64で、選択した周波数1周期あたり最低4区間になるよう自動調整されます。色コードは #RRGGBB 形式で入力してください。PNG生成に失敗する環境ではSVG出力を利用できます。

HTMLへの組み込み例

<!-- SVGコードをそのまま配置 -->
<section class="hero">
  <h1>Welcome</h1>
</section>
<svg viewBox="0 0 1440 320" width="1440" height="320" ...> ... </svg>
<section class="features">...</section>

<!-- コピーしたCSSを利用 -->
<style>
.section-divider {
  height: 120px;
  background-image: url("data:image/svg+xml;utf8,...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>

複数の波を重ねる

プリセット「重ね用・前景」「重ね用・後景」は、複数のSVGを同じ領域へ配置する際の出発点です。重ねる場合は各SVGの位置と高さを合わせ、後景側の色や不透明度をCSSで調整してください。

<div class="wave-container">
  <svg class="back"> ... </svg>
  <svg class="front"> ... </svg>
</div>
<style>
.wave-container { position: relative; }
.wave-container svg { position: absolute; inset: 0; }
.back { opacity: 0.4; }
</style>

よくある質問

Q. PNGよりSVGを使うメリットは?
SVGはベクトル形式なので、表示サイズを変えても輪郭を保ちやすく、HTMLやCSSへ組み込みやすい形式です。PNGは画像ファイルとして扱いやすい一方、元の出力寸法を超えて拡大すると輪郭が粗く見える場合があります。ファイルサイズは波形設定や保存形式によって変わるため、用途に合わせて選んでください。
Q. 波の滑らかさ(サンプル数)を上げると何が変わる?
サンプル数を増やすと、特に周波数が高い波で正弦波との近似誤差を小さくできます。周波数を上げた場合は1周期あたり最低4区間になるよう自動調整されます。その分SVGのパス文字列は長くなります。低い周波数では16前後から試し、形を見ながら調整してください。
Q. CSSだけで同じ波形を描けますか?
clip-pathやborder-radiusでも波に近い境界は作れますが、このツールは正弦波を三次ベジエ曲線で近似したSVG pathを生成します。生成結果は数学的に完全一致する正弦波ではありませんが、振幅・周波数・位相を個別に調整できます。
Q. Tailwind CSSでも使えますか?
利用できます。生成したSVGファイルを背景画像として指定するか、コピーしたCSSを通常のスタイルシートへ追加してください。Data URLは長くなるため、任意値クラスへ直接埋め込むよりCSSファイルや設定へ分ける方法が管理しやすくなります。
Q. 作成した波形はサーバーへ送信されますか?
いいえ。パラメータからのSVG生成とPNG変換はブラウザ内で行われ、波形データはサーバーへ送信・保存されません。
このツールを評価
—(0件)