無料でカスタマイズ可能SVGパターンをいろいろ作成できる「Book of Shapes」

サイトやデザインの背景などに使えるベクター形式のSVGパターン作品集「Book of Shapes」は、さまざまなSVGパターンをカテゴリ別に見ることができるほか、パラメータを調節してカスタマイズした上でポスターを作成することもできます。

Book of Shapes
https://bookofshapes.com/

サイトにアクセスすると、UI開発とAIの専門家であるニコライ・ソコロフスキ氏が作成したSVGパターンのリストを見ることができます。記事作成時点では36種類のSVGパターンが公開されていました。

気になるSVGパターンをクリック。

個別ページでは、右側のパラメータを操作することでSVGパターンを独自にカスタマイズできます。今回選択した「Chevron Blocks」では、「Bands(線の数)」「Taper(太さのグラデーション)」「Band Ratio(線の太さ)」「Blocks(ブロックの数)」「Seed(全体の向き)」を操作できます。

実際にパラメータを操作してカスタマイズしてみたら以下のようになりました。「Save variation」をクリックすることで、カスタマイズした内容が保存されます。

また、「Make a poster」をクリックすると、作成したSVGパターンからポスター風の画像を作ることができます。

ポスター作成画面は以下のような感じ。なお、あくまでSVGパターンからポスター風の画像を作ることができるというもので、テキストを変更したり詳細なデザインをしたりすることはできません。

左右の矢印をクリックすることで、ポスターのデザインが変更されます。

また、「Recolour」をクリックすると、ポスターデザインの配色が変更されます。

ポスター画像ができたら「Save this sheet」をクリックすることでサイト上に保存。

また、上部のダウンロードボタンからSVGファイルをダウンロードすることもできます。

今回作成したSVG画像は以下のような感じ。Book of Shapesで作成したコンテンツはすべてクレジット不要で商用利用・製品への使用・改変OKとなっています。ただし、SVGパターンをパターンのまま再配布することや、ジェネレータを販売または配布することはライセンスの対象外です。詳しくはLicenceのページから確認できます。