SVGパターン生成器

SVGパターンジェネレーターは、単一の繰り返し図形で埋められた SVG <pattern> 要素を定義することで、繰り返しタイル状の背景を作成します。6種類の図形タイプ（円、正方形、三角形、線、クロス、ひし形）をアウトラインプリミティブとして描画し、200x200 のプレビューにタイル状に配置して、ウェブページ、CSS背景、デザインファイルで使用するための完全な SVG マークアップをエクスポートします。

1. 6つのボタン選択肢からパターンタイプを選択します。 2. サイズスライダー（10〜60px）を調整して、タイル寸法と図形の縮尺を設定します。 3. ストローク幅スライダー（0.5〜6.0）を調整します。 4. 回転（0〜360度、5度刻み）を使用して、patternTransform でタイルを回転させます。 5. 2つのカラースウォッチを使って、図形の色と背景色を設定します。 6. コピーをクリックして、生成された SVG をクリップボードにコピーします。

エクスポートされる SVG は 200x200 で、patternUnits="userSpaceOnUse" を使用する <defs><pattern> ブロックを含んでいます。パターンの幅と高さはサイズの値と等しく、各タイルはそのサイズのグリッド上で繰り返されます。まず背景色で塗りつぶされた背景 <rect> が描画され、次に url(#pat) で塗りつぶされた2番目の <rect> がタイルを上に重ねます。回転がゼロでない場合、回転はパターン上の patternTransform としても、図形自体の rotate() 変換としても適用されます。