SVGパターンジェネレーター（幾何学タイル）

SVGパターンジェネレーター

ドット、線、グリッド、六角形、シェブロン、三角形など12種類のパターンタイプから、シームレスな幾何学タイルパターンを作成できます。色、サイズ、間隔、回転をカスタマイズし、SVGコード、CSS背景、またはダウンロード可能なSVGファイルとしてエクスポートします。すべてブラウザで実行され、即座に視覚的なフィードバックが得られます。

使用方法

ドロップダウンからパターンタイプを選択し、コントロールを調整してデザインをカスタマイズします。色、サイズ、間隔、線の太さ、不透明度、回転を変更すると、プレビューがリアルタイムで更新されます。結果に満足したら、エクスポートボタンを使用して、SVGコードのコピー、CSS背景マークアップのコピー、SVGファイルのダウンロード、またはパターンの定義のみをコピーして既存のSVGに埋め込みます。

機能

• 12種類のパターンタイプ — ドット、横線、縦線、斜線、グリッド、シェブロン/ジグザグ、六角形、三角形、ひし形、十字、波線、市松模様。それぞれシームレスにタイル化されます。
• ライブプレビュー — パターンをリアルタイムでタイル表示する大きなビジュアルプレビューエリア。すべての変更は即座に反映されます — 待機時間なし、生成ボタンなし。
• 色のカスタマイズ — 前景色と背景色のカラーピッカー。パターンのあらゆる色の組み合わせを作成できます。
• サイズと間隔のコントロール — パターンスケール（10〜100px）、線の太さ（1〜20px）、間隔（5〜100px）の範囲スライダー。パターンの密度と太さを微調整します。
• 不透明度と回転 — パターンの不透明度（0.1〜1.0）と回転（0〜360°）を調整して、クリエイティブなバリエーションやオーバーレイ効果を作成します。
• SVGコードとしてエクスポート — 埋め込みパターンを含む完全なSVGマークアップをコピーし、任意のプロジェクトに貼り付ける準備ができます。
• CSS背景としてエクスポート — データURI付きのCSS `background-image` プロパティをコピー — スタイルシートに直接貼り付けて、シームレスなパターン背景を作成します。
• SVGファイルをダウンロード — パターンを.svgファイルとしてダウンロードし、デザインツール（Figma、Illustrator、Sketch）で使用できます。
• パターンの定義をコピー — SVG `` 要素のみをコピーし、既存のSVGドキュメントに埋め込みます。

パターンタイプ

ドット： 規則的なグリッドに配置された円。クラシックな水玉模様。
線： 平行な水平、垂直、または斜めの線。クリーンでミニマル。
グリッド： 方眼紙のようなグリッドを形成する垂直な線。
シェブロン/ジグザグ： V字型の繰り返しパターン。ダイナミックな背景に最適です。
六角形： ハニカムタイリング。数学的でオーガニック。
三角形： 繰り返し三角形グリッド。幾何学的でモダン。
ひし形： 回転した正方形がひし形を形成します。エレガントでクラシック。
十字： グリッドに配置されたプラス記号。クリーンで構造化されている。
波線： 湾曲したサイン波線。オーガニックで流れるような。
市松模様： 交互に塗りつぶされた正方形と空の正方形。大胆で象徴的。