<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Animations svg</title>
</head>
<body>	
<!--animateColor-->
	<div class="elmt3">
		<svg version="1.1" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
			<rect x="15" y="0" width="80" height="200" rx="20" ry="20" style="fill:black;"/>
			<circle cx="55" cy="40" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;">
				<animate attributeName="fill" id="rect1"
				repeatDur="3"
				from="green" to="yellow"
				dur="3s"/>
			</circle>
			<circle cx="55" cy="100" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" >
				<animate attributeName="fill" id="rect2"
				repeatDur="3"
				from="yellow" to="orange"
				begin="rect1.end" dur="3s"/>
			</circle>
			<circle cx="55" cy="160" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" >
				<animate attributeName="fill" id="rect3"
				repeatDur="3"
				from="orange" to="red"
				begin="rect2.end" dur="3s"/>
			</circle>
		</svg>
	</div>		
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.