波形SVGジェネレーター
波の大きさ・形・色を調整し、Webページの区切りや背景を作成します。SVGや背景用CSSをコピー・保存でき、PNG画像でも保存できます。
できること
形と色を調整
波の高さ・数・位置や塗る方向を調整し、単色または2色で作れます。
用途に合わせて取得
SVGコードやCSS背景をコピー・保存し、PNG画像としても保存できます。
使い方
形の出発点を決める
そのまま数値を調整するか、「ひな形を選ぶ」から近い形を選びます。
大きさと色を調整
幅・高さ・振幅・波の数を指定します。開始位置や中心の高さは詳細設定で調整できます。
SVGを生成して確認
生成した波の形と透明部分を確認します。設定を変えたら再生成します。
必要な形式で取得
SVGかCSS背景を選んでコピー・保存するか、PNGを保存します。
こんなときに便利
ページの節を区切る
コンテンツの間やフッターの上などに、波の形の区切りを作ります。
サイトの色に合わせる
単色やグラデーションを使い、ページの配色に合う背景素材を作成します。
波の形と保存形式
振幅と波の数
振幅は上下に変化する大きさ、波の数は横幅全体に入る回数です。音声の波形を表示する機能ではありません。
波の位置と切り取られる範囲
開始位置を位相で、上下の位置を中心の高さで変えます。画像の外へ出た部分は切り取られます。
SVGとPNGの使い分け
SVGは形をベクターで表します。PNGは指定したピクセル寸法の画像として保存し、透明部分も保持します。
CSS背景を配置するには
CSSは背景画像の指定です。使う要素の幅と高さは掲載先で指定し、背景が表示される領域を確保してください。
よくある質問
波の形や色を調整できますか？
数値と色を指定できます。「2色を使う」を選ぶと、2つ目の色とグラデーションの角度を設定できます。
ひな形を選ぶと今の設定はどうなりますか？
幅・高さや色も含めて、ひな形の設定に置き換わります。必要な数値は選んだ後に調整してください。
設定を変えるとプレビューも変わりますか？
変更後は「SVGを生成」を押して確認します。古い生成結果は表示・保存の対象から外れます。
SVGは正確な正弦波ですか？
滑らかな3次曲線で近似した波形です。数学的な測定や音声解析用の波形ではありません。
ファイルの扱い
- 入力
- 波の数値設定と色から作成します。画像の選択は不要です。
- 出力
- wave.svg・wave.css・wave.png。SVGとCSSはコピーもできます。