SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」

 
簡単にSVGの背景パターンを作成できる「SVG Backgrounds」の紹介です。
30種類のパターンから自分好みにカラー・スケール・透明度を調整しコードをコピペするだけで使用できます。

SVG Backgrounds

ベースとなるバックグラウンドパターンを選択し、左エリアのカスタマイズでカラーやスケールを調整します。パターンのスケールを変えるだけでも印象が大分変わりますし、要素の背景にワンポイントで使用することも出来そうです。

ライセンスはCC BY 4.0。 リンク表示もしくはCSS内コメントアウトでの表示が必要なようです。
詳細はライセンスページで確認して下さい。



  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
RELATED POSTS
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • アイコンフォント「FontAwesome」の使い方
  • 立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • 音楽に合わせて要素を動かすことができる「Rythm.js」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 導入しておきたいWordPressのおすすめプラグイン