SVGパターン生成器
繰り返し可能なSVGタイルパターンを生成するジェネレーター。 模様の種類・色・サイズを調整してコードを出力できる。
#6366f1
#ffffff
プレビュー
SVGコード
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="custom-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<rect width="40" height="40" fill="#ffffff" />
<circle cx="20" cy="20" r="7" fill="#6366f1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#custom-pattern)" />
</svg>このツールをシェア
📖
使い方
Step 1
パターン選択
幾何学模様・和柄・モダンなどのパターンカテゴリを選択
→
Step 2
カスタマイズ
色・サイズ・間隔・回転などを調整
→
Step 3
SVGコピー
SVGコードまたは画像としてダウンロード
✨
このツールの特徴
リアルタイムプレビュー
パラメータ変更と同時にパターンをリアルタイムプレビュー
豊富なテンプレート
幾何学・ドット・ライン・和柄など多数のパターンテンプレート
シームレスタイリング
生成されるパターンは継ぎ目なくタイリング可能
❓
よくある質問
SVGの<pattern>要素を使った繰り返し可能なベクターパターンです。背景やフィルとして使用できます。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。