SVG波形ジェネレータ

重ねたSVG波形の区切りをデザインし、マークアップをコピーまたはダウンロードします。

セクション境界に使う重ねた正弦波をインラインSVGとして生成します。後ろのレイヤーは自動で薄くなります。viewBox＋preserveAspectRatio=noneで伸縮するため、セクションの端にそのまま貼れます。

すべてこのブラウザ内で実行します。

使い方

  1. サイズ・振幅・山の数・レイヤーを設定します。
  2. 色・配置・不透明度を選びます。
  3. プレビューしてSVGをコピーまたはダウンロードします。

対応範囲

キャンバス100〜4096 × 50〜2048px、山1〜12・レイヤー1〜5・振幅は高さの50%まで、塗りは#rrggbb形式。出力はviewBox＋preserveAspectRatio="none"付きの単体<svg>で、セクション端に伸縮して貼れます。グラデーションやアニメーションは出力しません。

関連する道具

関連ガイド