SVG背景パターンジェネレーター

SVGパターンジェネレーター

SVGパターンジェネレーター：継ぎ目のない背景タイル | We.Inc

ドット、グリッド、波、六角形など10種類の継ぎ目のないSVG背景パターン。サイズ、線幅、色、不透明度、角度を設定し、CSSまたはpattern要素を使ったSVGをコピーできます。

10種類のタイルの形から1つを選び、タイルのサイズ、線幅、色、不透明度、角度を設定すると、継ぎ目のないSVG背景ができあがります。どの要素でも繰り返し表示できるCSSのbackground-image用データURLとして、またはイラストの中で使えるpattern要素ベースのSVGファイルとしてコピーできます。描画もプレビューもすべてブラウザー内で行われます。

SVGタイルとCSSグラデーションのパターン、どちらを使う？

グラデーションの工夫でストライプやドットは描けますが、波、六角形、輪郭線は苦手です。小さなSVGタイルなら何でも描けて、どの拡大率でもくっきりしたままです。データURLにすれば、ページへのリクエストも増えません。

よくある質問

データURLで#や<をエンコードするのはなぜですか？

URLの中では、#はフラグメントの始まりを意味し、画像が途中で切れてしまいます。また、山かっこをそのまま書くと受け付けないパーサーもあります。%23、%3C、%3Eとしてエンコードすれば、SVGが壊れません。ダブルクォートはシングルクォートに置き換え、文字列がurl("...")の中に収まるようにします。

patternUnits="userSpaceOnUse"は何をするのですか？

タイルの幅と高さを描画と同じ単位で測ります。そのため、24のタイルはどこで使っても幅24ピクセルになります。デフォルトのobjectBoundingBoxでは、タイルのサイズが塗りつぶす図形に対する割合で決まります。

Tailwindでパターンを使えますか？

使えます。CSSルールをクラスとしてスタイルシートに追加するか、データURLを使ってbg-[url(...)]のような任意の値を指定します。URLが長い場合はクラスのほうが読みやすくなります。

これらのパターンは無料で使えますか？

はい。各タイルはこのページのコードが単純な図形から描いたものなので、出力はあなたのものであり、クレジット表記も不要です。

継ぎ目のないタイルの仕組み

2つの使い方

SVGのpattern属性

ジェネレーターが使うpattern要素の属性

CSS背景としてのパターン

カードの背後に置く六角形の輪郭の質感

不透明度を半分にした28ピクセルの六角形タイルです。background-sizeを変えると質感の大きさが変わります。

pattern要素を使った同じタイル

インラインSVGのイラスト内で使います。どの図形にもfill="url(#p)"を指定できます。

水玉

方眼

斜線

プラス記号

ジグザグ

波

三角形

市松模様

リング

六角形

パターンジェネレーター

パターン：水玉、方眼、斜線、プラス記号、ジグザグ、波、三角形、市松模様、リング、六角形。サイズ、線幅、色、不透明度、角度を設定して、CSSやSVGをコピーできます。

パターン

{name}パターンのプレビュー

タイルのサイズ：{n}px

線幅またはドットの半径：{n}

模様の不透明度：{n}

角度：{n}°

模様の色

背景

出力

CSS背景

タイルのSVG

<pattern>を使ったSVG

コピー

無料で始める · クレジットカード不要

関連: 無料ツール｜ビジネス向け計算・生成ツール

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る