Softonic

SVG波ジェネレーター

ステップ 1 / 2
次へ

曲線の波は、どのランディングページも遅かれ早かれ使うセクション区切りです。このジェネレーターは滑らかな正弦曲線をサンプリングして、塗りつぶした単一の<path>を作り、振幅・周波数・上下の位置を調整でき、任意の単色で塗ります。追加のCSSなしで2つのセクションの間にそのまま置けます。インラインのSVGコードをコピーして、ページに直接貼り付けてください。

SVG波を生成する方法

  1. 1

    色を設定

    カラーピッカーで、波の塗りに使う任意の単色を選びます。

  2. 2

    振幅を調整

    振幅（0〜150）を上げると曲線が深くなり、下げると穏やかな波になります。

  3. 3

    周波数を設定

    幅方向に1〜8サイクルを選びます。サイクルが多いほど、密で波打った模様になります。

  4. 4

    上か下かを選ぶ

    フッター用の波は下端に、ヘッダー用の波は上端に塗りを固定します。

  5. 5

    SVGをコピー

    インラインのSVGコードをコピーし、HTMLやCSSの背景に貼り付けます。

波が本当に役立つ場面

  • セクションの切り替え。 色付きのヒーローと白い本文の間に置き、視線が硬い境界にぶつからず流れるようにします。
  • フッター。 曲線の上端が、リンクの濃いブロックをやわらげます。
  • 料金カード。 全面の背景画像なしで、控えめに塗った角を作れます。
  • ヒーローバナー。 下端の波が、読者の視線を本文へと導きます。

パスの構造

ジェネレーターは正弦曲線をサンプリングし、1440 x 320のviewBox内に塗りつぶした単一の<path>を作ります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

パスは正弦波をなぞる短い直線で幅方向を進み、下端（または上端）まで閉じて単色の塗りを作ります。振幅を上げると山と谷が広がり、サイクルを増やすと幅方向により多く詰め込まれます。

レスポンシブにする

  • SVGはすでにpreserveAspectRatio="none"を設定しているので、波はどんな幅にも伸びます。
  • width="100%"が付いています。高さはCSS（height: autoまたは固定値）でお好みに調整します。
  • 奥行きのために波を重ねるには、自分のCSSに2つのコピーを置き、絶対配置にして、それぞれ別の色と不透明度を指定します。

アクセシビリティ

波は装飾です。aria-hidden="true"とrole="img"を追加してスクリーンリーダーがこの要素を飛ばすようにし、意味のある内容はすべて実際のHTMLの兄弟要素に置きます。

よくある質問

塗りをCSS変数（ダークモード、テーマ）に反応させたいときは、HTMLにSVGをインラインで置きます。波が純粋に装飾で、ブラウザに別々にキャッシュさせたいときはbackground-imageを使います。

はい。これはpreserveAspectRatio="none"を持つベクターの<path>なので、どんな幅にもギザギザにならずに拡大縮小します。拡大するとぼやけるラスター画像とは違います。

はい。パスをSVGで包み、CSSのキーフレームでd属性やtransform: translateX()をアニメーションします。動きは控えめに保ってください。自動再生される波のアニメーションはすぐに古く感じられます。

通常は1KBを大きく下回ります。塗りが1色の単一パスだからです。これはPNGの同等物のごくわずかな割合です。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます