デザイン / SVG

セクション区切り用SVGウェーブジェネレーター

ページセクション間の境界に使える、滑らかでレイヤー構造のSVGウェーブを生成します。レイヤー数、ウェーブ数、高さ、滑らかさ、色を選び、SVGをダウンロードするか、CSS背景としてコピーできます。

セクション区切り用SVGウェーブジェネレーター: 各レイヤーは、基準線の上下にランダムな量で交互に配置された点の列です。点を滑らかな曲線でつなぎ、下端まで塗りつぶします。背面のレイヤーほど淡い色になるため、奥行きが表現されます。SVGはどのような幅にも伸縮し、CSS版ではdata URIとして埋め込まれたSVGを背景に使用します。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

カテゴリ
開発者ツール
実行回数
ブラウザ内で
コスト
無料 · 登録不要
提供状況
すぐに使えます
SVGウェーブジェネレーターローカル処理

完全にブラウザ内で実行します

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVGは任意の幅に引き伸ばせる（preserveAspectRatio="none"）ため、セクション全幅の区切りに適しています。次のセクションの背景色を指定して、あるセクションの下部に配置してください。上部に使う場合は上下反転します。同じランダムシードを使うと、常に同じウェーブが描画されます。

SVGとCSSのどちらを使う？

インラインSVGはCSSからスタイルを設定したりアニメーションさせたりでき、塗りつぶしにはcurrentColorを使えます。CSSの背景として使う場合、SVGはデータURIになるため追加の読み込みは不要ですが、色はコード内で固定されます。どちらの場合もファイルサイズは数百バイト程度で、SVGクリーナーを使ってさらに整理できます。

滑らかさ

曲線はCatmull-Romスプラインを三次ベジェ曲線のセグメントに変換したものです。滑らかさを最大にするとすべての点を通って緩やかに曲がり、ゼロにすると点同士を結ぶ直線になって、ぎざぎざした山の縁になります。

使い方

  1. レイヤー数、ウェーブ数、高さを設定します。
  2. 色を選び、セクション上部に使う場合はウェーブを反転します。
  3. 新しいランダムウェーブを生成し、SVGをダウンロードするかCSSをコピーします。

プライバシーと制限事項

ウェーブはブラウザ内で描画されます。

関連ツール

SVGブロブCSSパターンCSSグラデーション

よくある質問

2つのセクションの間で使うにはどうすればよいですか？

下側のセクションの色をウェーブに設定し、上側のセクションの下端に横幅いっぱいで配置します。セクションの上部に使う場合は反転してください。

同じ設定なら同じウェーブになりますか？

はい。形状はランダムシードから生成されるため、新しいウェーブを生成するまで変わりません。

ウェーブを商用利用できますか？

はい。形状は利用者向けに生成され、ライセンス上の制限はありません。

無料ツール · ブラウザ内で · アカウント不要