サークルがランダムに配置される背景を SVG で作る
SVG を使って、毎回ランダムな色・大きさ・配置でボケ(bokeh)なサークルを作ってみます。まあやってることは前回の Kawaii Bubbles! とあんまり変わりませんけど……。前回は li 要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVG なら画像だから別にいいかと思って、今回のを作ってみました。

SVG を使って、毎回ランダムな色・大きさ・配置でボケ(bokeh)なサークルを作ってみます。まあやってることは前回の Kawaii Bubbles! とあんまり変わりませんけど……。前回は li 要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVG なら画像だから別にいいかと思って、今回のを作ってみました。
以前、元画像を変更せずに画像をグレースケールで表示する という記事で「canvas での変換は重いから現実的じゃない」みたいなことを書いたのですが、-webkit-filter が使えるようになった(なる)ことにより、もう少し負担を減らして使えるのではないかと思いました。そこで、なるべく canvas での変換を行わずにやってみようと思います。
タイトル通りなんですが、画像を1枚だけ用意して、それをカラーで使ったりグレースケールで使ったりしたいわけです。IE には最初からフィルタが用意されていますが、クロスブラウザにできないかと思って調べてみました。