Design Tools
パターンジェネレーター
背景用のシームレスな繰り返しパターンを作成
パターンタイプ
寸法
10px
20px
2px
0°
100%
色
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22pattern%22%20width%3D%2230%22%20height%3D%2230%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(0)%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%225%22%20fill%3D%22%236366f1%22%20opacity%3D%221%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: repeat;なぜパターンジェネレーターを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓Geometric and organic patterns
- ✓Size and spacing control
- ✓Color customization
- ✓Pattern rotation
- ✓PNG, SVG, and CSS export
- ✓Tile preview
よくある質問
What pattern styles are available?
Dots, lines, grids, hexagons, triangles, waves, and more geometric shapes.