<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Animations svg</title>
 </head>

<body>	

	<div class="elmt2">
		<svg version="1.1" fill="pink" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
			<rect width="100" height="50">
				<animate attributeName="width" attributeType="XML" id="rect1"
				fill="freeze"
				from="0" to="150"
				begin="0s" dur="1s"/>
			</rect>
			<rect y="50" x="150" width="0" height="50" >
				<animate attributeName="width" attributeType="XML" id="rect2"
				fill="freeze"
				from="0" to="150"
				begin="rect1.end" dur="1s"/>
			</rect>
			<rect y="100" x="0" width="0" height="50" >
				<animate attributeName="width" attributeType="XML" id="rect3"
				fill="freeze"
				from="0" to="150"
				begin="rect2.end" dur="1s"/>
			</rect>
			<rect y="150" x="150" width="0" height="50">
				<animate attributeName="width" attributeType="XML"
				fill="freeze"
				from="0" to="150"
				begin="rect3.end" dur="1s"/>
			</rect>
		</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.