Wave Generator

使い方

1. 層数を設定します。1 層は滑らかな一波、3〜4 層はページ区切りでよく見る重ね波です。
2. 振幅で波の峰の高さを、波長で 1 周期の幅を調整します。波長が小さいと細かく、大きいとなだらかなうねりになります。
3. 图形の高さと全層共通の不透明度を設定します。
4. 色の列で各層に左から順に色を割り当てます。使っていない層の色も保持されます。
5. SVG をコピーし、上のセクションの下端か下のセクションの上端に position: absolute と bottom: 0 で置きます。

こんなときに

• フッターやセクションの区切り —— 引き伸ばした波が異なる背景色の 2 ブロックの間に立つ。
• ヒーロー領域の背景 —— 大きく低い振幅の波を見出しの下に置くと地平線や水面に見える。
• オンボーディングのイラスト —— 2〜3 層で静かな空状態に動きが出る。
• メールや LP のモック —— インライン SVG は画像リクエストが不要で、拡縮も鮮明。

プライバシーについて

パスはページ内でスライダー値から計算され、プレビューはコピーされるマークアップそのものです。アップロードもサーバー側の画像生成もありません。

FAQ

Q: なぜプレビューはウィンドウ幅に伸びるのですか？ A: viewBox は 1440 単位固定で、preserveAspectRatio="none" がブラウザに容器いっぱいに引き伸ばすよう指示しているためです。繰り返しなしで任意の画面を覆えるので区切りに適しています。

Q: 波を反転したり上向きにするには？ A: SVG を transform: rotate(180deg) の容器で包むか、ファイルをセクションの上端に置きます。パス自体は常に峰から下へ塗られます。

Q: 4 層より多くできますか？ A: ツールは 4 層までで、大抵の区切りデザインを網羅します。それ以上は <path> 行をコピーして塗り色を変えてください。相位の間隔は一致したままです。

Q: 層の色は混ざりますか？ A: いいえ。各層は不透明度を付けたパスで、後ろの層から順に描かれ、重なる部分は透明度による見た目の重なりです。グラデーションではありません。