SVGのパターン画像を作成できるジェネレーター「SVG Pattern Maker」

SVGのパターン画像を作成できるジェネレーター「SVG Pattern Maker」

SVGのパターン画像を作成できるジェネレーター「SVG Pattern Maker」

SVG Pattern Makerは、サイトの背景などで使えるSVGのパターン画像を作成できるジェネレーターです。

ジェネレーターの作成者は、webOpixelのk.ishiwataさんです。Vue.jsで作成しているとのことです。

SVG Pattern Makerの使い方

SVG Pattern Makerにアクセスして、「パターンの種類(丸・四角・ライン)」「サイズ」「マージン(余白)」「回転」「色」「背景色」「境界線」を設定していきます。

SVG Pattern Makerの使い方

左側のプレビューがリアルタイムで切り替わるので、プレビューを確認しながら微調整していきましょう。

設定が完了したら、右下のボタンから[データをコピー]するか、[SVGダウンロード]からSVGファイルをダウンロードします。

SVGのダウンロード

CSSでは以下のように背景を指定します。以下はデータをコピーした場合。SVGをダウンロードした場合は、jpgやpngと同じようにファイルをのパスを指定します。


body {
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20id%3D%22pattern-box%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%228%22%20y%3D%228%22%20width%3D%2230%22%20height%3D%2230%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(0)%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%239ED4F5%22%20stroke-width%3D%220%22%3E%3C%2Frect%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3C!----%3E%3Crect%20fill%3D%22url(%23pattern)%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
}

あとがき

パターンの種類も選べますし、サクッとパターンが作成できてありがたいですね。

サイトの背景にパターンを採用しようと思っている方は、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です