こんにちは。デザイナーのSUGIYAMAです。
以前「SVGのパスを手軽にアニメーションを実装できる！ jQuery DrawSVGのお話」でSVGファイルをアニメーションできるプラグインを紹介しましたが、今回はSVGで背景パターンを作ってくれるオンラインツール「SVG Backgrounds」をご紹介します。
SVG Backgrounds
数種類のパターンがあり、クリックすると背景に反映されます。
また、左エリアで色やスケールをカスタマイズでき、スケールを変えるだけでも印象が変わったりして、そこで触っているだけでも楽しいです。
ライセンスは？
ライセンスは「CC BY 4.0」です。サイトで使用する場合は、リンク表示もしくはCSS内にコメントアウトでの表示が必要です。
html
<p> I customized the wicked cool background on my homepage at <a href="https://SVGBackgrounds.com">SVGBackgrounds.com</a>.</p>
css
.bg-zig-zag{
background-color: #0b7;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' points='120%2C0 120%2C60 90%2C30 60%2C0 0%2C0 0%2C0 60%2C60 0%2C120 60%2C120 90%2C90 120%2C60 120%2C0'/%3E%3C/svg%3E");
/* background by SVGBackgrounds.com */
}
サイト
- SVG Backgrounds（https://www.svgbackgrounds.com）
- ライセンス情報（https://www.svgbackgrounds.com/license/）
