Dots Obsession in SVG

対応ブラウザ: Chrome, Firefox, Safari

CSS

/* bodyの背景だとなぜかアニメーションしない‥ */
html{
	background-image: url(dots.svg);
}

SVG: dots.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<!-- ▼▼パターンの定義 1つめ▼▼ -->
<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>
<!-- ▲▲パターンの定義 1つめ▲▲ -->
<!-- ▼▼パターンの定義 2つめ▼▼ -->
<pattern id="dots2" width="100" height="100" patternUnits="userSpaceOnUse">
	<circle r="20" cx="75" cy="75" fill="white">
		<animate attributeName="r" dur="6s" values="30;10;30" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="-25" cy="75" fill="white">
		<animate attributeName="r" dur="6s" values="30;10;30" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="75" cy="-25" fill="white">
		<animate attributeName="r" dur="6s" values="30;10;30" repeatCount="indefinite"/>
	</circle>
	<circle r="20" cx="-25" cy="-25" fill="white">
		<animate attributeName="r" dur="6s" values="30;10;30" repeatCount="indefinite"/>
	</circle>
</pattern>
<!-- ▲▲パターンの定義 2つめ▲▲ -->
<!-- ▼▼基本の背景色▼▼ -->
<rect x="0" y="0" width="100%" height="100%" fill="red"/>
<!-- ▲▲基本の背景色▲▲ -->
<!-- ▼▼パターンを背景に敷き詰める▼▼ -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots1)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots2)"/>
<!-- ▲▲パターンを背景に敷き詰める▲▲ -->
</svg>