SVG Pattern Generator | Nucleo

Nucleoが提供するSVGパターンジェネレータ。grid、dot、line、crossなど繰り返し可能なシームレスパターンをブラウザ上で組み合わせ、色と不透明度を調整して書き出す。

できること

• グリッド・ドット・ライン・クロスなどのプリセットから選ぶ
• 複数のパターンをレイヤーとして重ね、順序を入れ替える
• カラーとオパシティを個別に調整する
• リアルタイムプレビューを確認しながら、SVGコードをコピーする

出力は素のSVGなので、CSS背景、HTML、React/JSX、そのほか現代的なWebプロジェクトにそのまま貼れる。すべてのパターンはシームレスでタイル可能。

ライセンス

個人・商用ともに利用可。ただしパターン素材自体の再配布や転売、競合ライブラリの構築には使えない。

Webサイトやアプリの背景に、画像ではなくベクターの軽量パターンを敷きたいときに使える。アイコンライブラリで知られるNucleoが運営している。