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 */
}

サイト

  • このエントリーをはてなブックマークに追加
この記事は SUGIYAMA が書きました。

プラカンが目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

  2. 仕事の進め方に
    満足していただく

  3. サポート・フォーローに
    満足していただく

詳しくはホームページ企画・設計をご覧ください

ホームページ企画・設計

ホームページに関するご要望がございましたら、お気軽にご相談ください。

全国各地のホームページ制作に対応

プラカンは大阪本社、東京事務所を拠点に首都圏、関西圏はもちろん、全国のお客様のホームページ作りのお手伝いをさせていただきたいと考えております。オンラインでの無料相談にも対応しております。ぜひ一度ご相談ください。

お問い合わせ

お電話でのお問い合わせ