SVGパターン生成ツール

ドット、ストライプ、チェック等のSVGパターンを生成。サイズ・色・回転をカスタマイズできます。

パターン種類

サイズ: 20px

回転: 0°

パターン色

背景色

透明度: 1.00

プレビュー

SVGコード

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern-dots-1770622565747" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <circle cx="10" cy="10" r="4" fill="#3b82f6" opacity="1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#ffffff"/>
  <rect width="100%" height="100%" fill="url(#pattern-dots-1770622565747)"/>
</svg>

CSSコード

.pattern-bg {
  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-dots-1770622565747%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(0)%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%224%22%20fill%3D%22%233b82f6%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-dots-1770622565747)%22%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 20px 20px;
}

使い方

パターンの種類を選択し、サイズ・色・回転を調整
SVGコードをそのまま使用、またはCSSのbackground-imageとして使用
Data URI形式なので外部ファイル不要
軽量でスケーラブルなパターン背景を簡単に作成できます