SVG / セクション

SVGシェイプ区切り：セクションの境界とレイヤー

振幅、周波数、高さ、反転、塗りの反転、最大3つのレイヤーを指定して、8種類のSVGセクション区切りを生成します。セクションをプレビューし、SVG、CSS、HTMLをコピーできます。

SVGシェイプ区切り：セクションの境界とレイヤー: 波形、曲線、傾斜、三角形、矢印、ジグザグ、雲、山の境界から選び、高さ、振幅、繰り返し回数を調整できます。反転や塗りの反転、最大3つのレイヤーにも対応しています。区切りはページ幅に合わせて伸縮します。SVG、配置用CSS、またはすぐに使えるHTMLセクションをコピーできます。サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

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

SVGシェイプ区切りローカル処理

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

セクションのプレビュー

雰囲気を変えてみましょう。

2つのセクションの間に配置する形状付きの境界です。

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSSの位置指定

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTMLセクション

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

連続した境界にするには、次のセクションの背景色を使用します。下部の区切りを上部に移動する場合は、垂直方向に反転してください。

閉じたパスと座標

SVG 2では、closepathと3次ベジェ曲線のパスコマンドが定義されています。https://www.w3.org/TR/SVG2/paths.html 。viewBoxは、これらの座標をビューポートに対応付けます。https://www.w3.org/TR/SVG2/coords.html

図形の出典

波形にはSVG Wave GeneratorとSVG Blob Generatorと同じ滑らかな曲線を使用し、その他の形状は単純な数式から描画しています。第三者のアートワークは含まれていないため、出力は自由に使用できます。

使い方

シェイプを選び、振幅、周波数、高さを調整します。
レイヤー、不透明度、色を設定し、セクションの境界と必要な反転を選択します。
SVG、配置用CSS、セクションHTMLをコピーするか、SVGをダウンロードします。

プライバシーと制限事項

シェイプの生成とダウンロードはすべてブラウザ内で実行されます。

よくある質問

境界を別のセクションになじませるにはどうすればよいですか？

そのセクションの背景色を区切りの塗り色に使用してください。CSSが区切り用のスペースを確保し、選択した境界に絶対配置します。

波形ツールとの違いは何ですか？

このツールでは、7種類のシェイプ、反転、セクションHTMLを追加で利用できます。既存のSVG Wave Generatorは、ランダムな波形と、波形専用の追加コントロールを提供します。SVG Blob Generatorは、独立した有機的なシェイプを作成します。

塗りの反転では何が変わりますか？

塗りの反転では、パスを下ではなく上に向かって閉じます。区切りの境界はそのまま維持されます。一方、垂直反転ではシェイプ全体を反転します。

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

雰囲気を変えてみましょう。

閉じたパスと座標

図形の出典

使い方

プライバシーと制限事項

関連ツール

よくある質問