パターン生成

幾何学・オーガニックなCSS/SVG背景パターン。

パターンのスタイル

ドットグリッドストライプ波

パターンの色

背景色

パターンのサイズ40px

ドットの半径4px

パターンの不透明度30%

高効率なインラインSVGを使用したリアルタイムのパターンレンダリング。レスポンシブで完璧に整列。

CSS背景コード

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

生のSVG XMLコード

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>

使い方の仕組み

はい。目立つ継ぎ目なくタイル表示されるため、どんなサイズの背景でもきれいに敷き詰められます。

Web 背景にはインライン CSS が最も手早く使えます。単体のアセットとして編集したり他の用途に再利用したりしたい場合は、そのままの SVG が適しています。

いいえ。パターンはすべてブラウザ内で生成されます。