シンプルなパターンがたくさん揃ってる！商用無料で使えるSVGの背景素材 -Basic Pattern Repository
Post on:2021年9月29日
sponsors
シンプルなものからかわいいものまで、ベーシックなパターンが揃ったSVGフォーマットの背景素材を紹介します。インラインSVG、SVGファイル、Figma用が揃っており、SVGなのでカラー変更なども簡単です。
商用プロジェクトでも完全に無料で、こういうシンプルなパターンはさまざまなデザインに使用できるので、助かりますね。
Basic Pattern Repository
Basic Pattern Repository -GitHub
Basic Pattern RepositoryはSVGで使用することを目的としたシンプルでベーシックなパターンのコレクションです。ライセンスはGPLv3で、商用プロジェクトでも無料で利用できます。
パターンを利用するのは簡単で、3通りの方法があります。
- インラインのSVGとして使用する
- .svgファイルとして使用する
- Figmaで使用する
「インラインのSVG」は各パターンをクリックすると、コードが表示されます。「.svgファイル」はダウンロードをクリックすると、.svgファイルがダウンロードでき、CSSの背景画像として簡単に使用できます。
コードをドキュメントの<defs>に追加して、パターンします。
|
1 2 3 |
<pattern id="pattern-1" patternUnits="userSpaceOnUse" width="4" height="4"> <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="currentcolor" style="stroke: var(--pattern-channel-1, currentcolor)" /> </pattern> |
「Figmaで使用する」は、下記ページから。
Basic Patterns for backgrounds
「Duplicate」をクリックすると、Figmaで使用できます（要Figmaのログイン）。
Figma
シンプルなものから、かわいいものまで、ベーシックなパターンが揃っています。
Figma
sponsors
