「Hero Patterns」はSVGパターンを配布しているサイトで、単純に用意されているパターンをダウンロードするだけでなく、背景やその上にある要素のカラーを任意で指定してオリジナルカラーで表示するするためのコードも表示してくれます。
現時点で40種類のパターンが公開されており、見た目もシンプルなものからユニークな感じのものまであります。
また、画面上部にある「Foreground color」「Background color」「Foreground Opacity」の項目では、各パターンの配置されている要素のカラーと透明度、背景のカラーをそれぞれ任意で変更できるようになっており、その組み合わせを使用した際のそれぞれのパターンの見栄えを確認できるようになっています。
パターンを選択するとこのようにモーダル表示され、ここでSVGのダウンロードを行うことができます。
また、このモーダル内でもオリジナルカラーを試すこともでき、この組み合わせで使いたいと思ったらモーダル内上部にある「GENERATED CSS CODE」内にコードが出力されているので、それを利用してオリジナルカラーのパターンを使用できます。