Toolipedia 埋め込み
JA
← すべてのテキストツール

SVGウェーブ生成

セクションの区切りや背景用の重なった波を、SVG、PNG、CSSで作成します。

  • 無料
  • 登録不要
  • どの端末でも使える

約SVGウェーブ生成

ウェブページのセクションを、硬い直線ではなく重なった波形で区切れます。レイヤー数、高さ、なめらかさ、色を設定して、SVG、PNG、CSSとして書き出せます。SVGの波は小さなファイルで、preserveAspectRatioをnoneにすると全幅に引き伸ばせます。

SVGウェーブ生成の使い方

  1. レイヤーの数、高さ、波のなめらかさを設定してください。
  2. ページに合うように、各レイヤーの色を選択してください。
  3. 波をSVG、PNG、CSSで書き出して、レイアウトに配置してください。

このツールを使う理由

別名

よくある質問

波の区切りを全幅にするにはどうしますか?

SVGの幅を100%にして高さを固定し、preserveAspectRatioをnoneにすると、曲線が画面に合わせて伸び、隙間ができません。

波を反転させて、セクションの上部に配置するにはどうすればよいですか?

CSSのtransformでSVGを180度回転させるか、波を上部に置いて、上のセクションと同じ塗りつぶしの色を使ってください。

SVGエクスポートとCSSエクスポートのどちらを使うべきですか?

形を編集したり、画像として再利用したりしたい場合は、SVGを使ってください。追加のファイルを読み込まない背景が欲しい場合は、CSSエクスポートを使ってください。

SVGウェーブ生成は無料ですか？

はい。ToolipediaのSVGウェーブ生成は無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

SVGウェーブ生成 を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール