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

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

SVG Backgrounds

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

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



  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
RELATED POSTS
  • ラフな手書き風デザインのWebコンポーネント「Wired Elements」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • 日本の契約書のためのCSSライブラリ「Keiyaku CSS」
  • リデザインのレビューを集めたWebサービス「reDSGN」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
RECENT POSTS
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】無料で使えるフリー動画素材サイト10選
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 無料で使えるフリーアイコン素材サイト15選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)