SVGアニメーションをパターンで繰り返す

October 14th, 2012

SVG画像は繰り返しパターンを定義して大きさに応じて繰り返すことができます。

<pattern id="dots" width="100" height="100" patternUnits="userSpaceOnUse">
	<circle r="20" cx="25" cy="25" fill="white"/>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"/>


あと要素をアニメーションさせたりできるんで面白いですね。

<circle r="20" cx="25" cy="25" fill="white">
	<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
</circle>


これを組み合わせて、パターンをアニメーションさせることもできます。
ただそれを作るときは、パターンの中に上下左右の繰り返し部分を入れておかないと、途切れたように見えてしまうことがあります。

[続きを読む]

Facebookページのカテゴリー一覧

June 6th, 2012

Facebookページを作るとき、そのページが属するカテゴリーを決める必要があります。
そのカテゴリーの一覧が欲しかったんですがシンプルにまとまったものが見つけられなかったので、作りました。
2012年6月6日時点の、実際のページ作成ページから抽出しています。
[続きを読む]