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

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

SVG Backgrounds

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

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



  • Web上で差分が確認できるテキスト比較ツール「difff」
  • ロゴを様々な角度からテストできるツール「Logo Lab」
  • ワールドカップのユニフォームのパターンをまとめた「World Cup in Pattern」
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
RELATED POSTS
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • 【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」
  • 【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
RECENT POSTS
  • バナー広告デザインの参考にしたいギャラリーサイト8選
  • CSSで作成する吹き出しとデザインのアイデア
  • ロゴ作成が簡単にできるロゴジェネレーター12選【無料・低価格】
  • 長いURLを短くするおすすめの短縮URLサービス8選
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • CSSで作成する吹き出しとデザインのアイデア
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選