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

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

SVG Backgrounds

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

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


  • 無料で簡単にホームページを作成できる「Wix」の使い方とレビュー
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • CSSをショートハンドに書き換えてくれる「SHRTHND」
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
RELATED POSTS
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • 【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」