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

投稿者:Kazuma89

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>

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


綺麗に表示させるには、パターンの中でアニメーションする要素を、上下左右に入れます。

<pattern id="dots1" width="100" height="100" patternUnits="userSpaceOnUse">
	<circle r="20" cx="25" cy="25" fill="white">
		<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="125" cy="25" fill="white">
		<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="25" cy="125" fill="white">
		<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="125" cy="125" fill="white">
		<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
	</circle>
</pattern>

これを背景に指定すると、↓のようにキモいページができますので是非お試しください。
Dots Obsession in SVG

試してみてわかったんですが、bodyの背景にSVGアニメーションを指定しても動かないみたいなのですが、htmlの背景とか、body以外のタグには効くようです。どうしてだろう？