プラカンブログSTAFF BLOG

2019.01.11

SVGで背景パターンを作れるジェネレーター「SVG Backgrounds」

こんにちは。デザイナーの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 */
}

サイト

+dc(杉)

この記事は、SUGIYAMA が書きました。