有機的な形（blob）のSVGをランダムに生成します。背景の装飾やアイキャッチの下地として使える、やわらかい形をすぐ作れます。
使いどころ
- セクション背景の装飾
- アイコンや写真の背面に敷く形
- アイキャッチ画像の下地
- 余白が寂しいときのアクセント
SVGで使う利点
SVGはベクター形式のため、拡大しても輪郭がぼやけません。ファイルサイズも小さく、CSSで色を変えることもできます。
コードとしてHTMLに直接埋め込めば、画像の読み込み待ちも発生しません。色をCSS変数にしておけば、ダークモードでの切り替えも簡単です。
配置のコツ
- コンテンツの背面に置き、position と z-index で重なりを調整します
- 彩度を抑えた色にすると、前面の文字が読みやすくなります
- 画面からはみ出すように大きく配置すると、動きのある印象になります
- 使いすぎると散らかるため、1画面に1〜2個までが目安です
背景に使うときの重ね方
親要素に overflow: hidden を指定しておくと、大きく配置しても画面からはみ出したスクロールバーが出ません。不透明度を下げると、前面の文字が読みやすくなります。
.section { position: relative; overflow: hidden; }
.blob { position: absolute; z-index: -1; opacity: .12; }よくある質問
Q 生成したSVGはどう使いますか？
コードをコピーしてHTMLに貼り付けるか、SVGファイルとして保存してimg要素で読み込みます。
Q 色は変えられますか？
生成されたコードのfill属性を書き換えるか、CSSで指定できます。
Q 商用利用できますか？
生成された図形はご自由にお使いいただけます。
Q 同じ形を再現できますか？
生成のたびに形が変わります。気に入った形はコードを保存しておいてください。