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以外のタグには効くようです。どうしてだろう?