SVG / 背景
SVGパターンジェネレーター：継ぎ目のない背景タイル
ドット、グリッド、ストライプ、チェック、ジグザグ、波、三角形、六角形、プラス記号、円、ずらし配置の水玉模様を作成できます。エスケープ済みのCSS背景をコピーするか、SVGとPNGのタイルをダウンロードできます。
SVGパターンジェネレーター：継ぎ目のない背景タイル: ドット、グリッド、ストライプ、チェック、波、六角形などのモチーフを選び、サイズ、間隔、色、回転角度を設定すると、目に見える継ぎ目なく繰り返せるタイルを作成できます。SVGまたはCSS背景としてコピーしたり、SVGまたはPNGのタイルとしてダウンロードしたりできます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
タイル：48 × 48 SVG単位
SVGパターン
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><pattern id="s5svg-pattern" width="48" height="48" patternUnits="userSpaceOnUse" patternTransform="rotate(0)"><g transform="translate(-48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g></pattern></defs><rect width="100%" height="100%" fill="#14200f"/><rect width="100%" height="100%" fill="url(#s5svg-pattern)"/></svg>
CSS背景
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpattern id='s5svg-pattern' width='48' height='48' patternUnits='userSpaceOnUse' patternTransform='rotate(0)'%3E%3Cg transform='translate(-48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%2314200f'/%3E%3Crect width='100%25' height='100%25' fill='url(%23s5svg-pattern)'/%3E%3C/svg%3E");
background-size: 48px 48px;
background-repeat: repeat;回転は45°単位で、書き出した正方形タイルがシームレスになるようにします。PNGには1つのタイルが含まれます。ストロークは輪郭付きのモチーフに適用され、チェック柄には単色の塗りが使われます。
CSSグラデーションでパターンを作成SVGパターン
SVG 2では、タイルの座標系と回転を定義するpatternUnitsとpatternTransformが規定されています。https://www.w3.org/TR/SVG2/pservers.html#Patterns
CSSでパターンを使用する
CSSの背景にはSVGタイルがdata URIとして埋め込まれるため、個別の画像ファイルは必要ありません。SVGの座標変換はhttps://www.w3.org/TR/SVG2/coords.htmlで規定されています。モチーフはローカルで生成され、外部のパターンやフォントアセットは使用されません。
使い方
- モチーフを選び、サイズ、間隔、線幅を設定します。
- モチーフの2色、背景色、回転角度を選びます。
- 繰り返しプレビューを確認し、CSSをコピーするか、SVGまたはPNGタイルとして書き出します。
プライバシーと制限事項
パターンの生成と画像の書き出しはすべてブラウザ内でローカルに行われます。
関連ツール
よくある質問
回転角度が45度刻みなのはなぜですか？
任意の回転角度では、正方形の繰り返しタイルを有限のサイズで作れないことが一般的です。これらの角度では正方形のスーパータイルを作れるため、CSSとダウンロードした画像を継ぎ目なく表示できます。
PNGにはプレビュー全体が含まれますか？
いいえ。PNGに含まれるのは1つの繰り返しタイルで、正方形のラスターサイズは整数ピクセルに切り上げられます。SVGでは正確な幾何学的寸法が維持されます。
SVGを使わずに生成できますか？
既存のCSSパターンジェネレーターでは、CSSグラデーションを使ってより少ない種類のパターンを作成できます。このツールではSVGのパターン要素とダウンロード可能なタイルを提供します。線幅は輪郭線のあるモチーフに反映され、チェックには塗りつぶしが使われます。
無料ツール · ブラウザ内で · アカウント不要