パターン生成

ドットやストライプなどの背景パターンを作り、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>

使い方

はい。つなぎ目が見えないようにタイル状に並ぶので、どんな大きさの背景も、きれいに埋められます。

ウェブの背景には、インラインのCSSがいちばん手早く使えます。生のSVGなら、編集したり、ほかで再利用したりできる単独の素材になります。

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