N2
NanToo
AD
デザイン・Web制作

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

Webサイトのヒーロー下やフッター上に使える波形SVGをインタラクティブに生成。振幅・周波数・位相・2色グラデーション・左右反転に対応。12種プリセットとSVG/PNG/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="100%" preserveAspectRatio="none">
  <defs>
    <linearGradient id="waveGrad" 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)" />
</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%22100%25%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22waveGrad%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%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234f46e5%22%20%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%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)%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
AD
このツールについて問い合わせる →

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

SVG Wave Generator とは

Web サイトのセクションとセクションの境目を、直線ではなく波形で区切るデザイン手法は、近年多くのランディングページで採用されています。本ツールは、その波形を任意のパラメータ(振幅・周波数・位相・高さ・色)で自由に生成し、SVG / PNG / CSS(Data URL)として取り出せるインタラクティブジェネレータです。

数学的には y(x) = baseline + amplitude × sin(2π × (x/width) × frequency + phase) を 16〜64 等分の三次ベジエ曲線で近似描画しています。導関数から両端の傾きを算出して滑らかに接続するため、ジャギーのない美しい曲線になります。

使い方

  1. プリセットから雰囲気を選ぶ(12種)、またはパラメータを直接調整する
  2. 振幅で波の高さを、周波数で波の数を変える
  3. 位相で横方向の波の開始位置をずらす
  4. 「下を塗る」でヘッダー直下用、「上を塗る」でフッター直上用
  5. 2色グラデーションを有効にし、角度を指定するとレイヤー感が出る
  6. 「SVG をコピー」で HTML に直接貼り付け、または「CSS をコピー」で background-image として使う

HTMLへの組み込み例

<!-- そのまま inline -->
<section class="hero">
  <h1>Welcome</h1>
</section>
<svg viewBox="0 0 1440 320" ...> ... </svg>
<section class="features">...</section>

<!-- CSS background として -->
<style>
.section-divider {
  height: 120px;
  background-image: url("data:image/svg+xml;utf8,...");
  background-size: 100% 100%;
}
</style>

複数の波を重ねる

プリセット「重ね用・前景」「重ね用・後景」を組み合わせると、深みのあるレイヤード波形が作れます。後景を薄い色で大きく、前景を濃い色で小さく配置するのがコツです。

<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 はベクトル形式なので、どんな画面サイズに伸縮しても綺麗に表示されます。PNG はラスタ形式のため、大画面で引き伸ばすとジャギーが出ます。また SVG は CSS から色を変えたり (fill プロパティ)、アニメーションさせたりできます。ファイルサイズも SVG の方が圧倒的に小さい(数百バイト)です。
Q. 波の滑らかさ(サンプル数)を上げると何が変わる?
サンプル数 4〜8 では角ばった波、16〜32 で滑らか、64 で非常に精密な曲線になります。ただし SVG パス文字列が長くなるため、通常は 16〜24 で十分です。高周波数の波にはサンプル数を多めにするのがコツです。
Q. CSSで直接波形を描けないの?
CSS の clip-path や border-radius では真の正弦波は描けません。近似はできますが、パラメータ制御や滑らかさで SVG に劣ります。一方 SVG path の <code>d</code> 属性ならブラウザが三次ベジエ曲線を数学的に描画するため、ピクセルパーフェクトな正弦波が得られます。
Q. Tailwind CSS でも使えますか?
はい。Data URL 化した SVG を Tailwind の任意値記法で直接指定できます。例: <code>class="bg-[url('data:image/svg+xml;utf8,...')]"</code>。ただし Data URL は長いので、tailwind.config.js の backgroundImage カスタム定義に登録するのが実用的です。
このツールを評価
—(0件)