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

<body>	
<!--animate-->
	<div class="elmt1">
		<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"
				fill="freeze"
				from="0" to="300"
				begin="0s" dur="3s"/>
			</rect>			
		</svg>
	</div>
	
	<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>	

<!--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>		
	
<!--set-->
	<div class="elmt3">
		<svg version="1.1" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
			<g style="visibility: hidden">
				<rect x="25px" y="25px" width="200" height="100" style="fill :pink" />
				<set attributeName="visibility" attributeType="CSS"
				to="visible"
				begin="0" dur="3s"/>
			</g>
		</svg>
	</div>	

<!--animateTransform-->
	<div class="elmt3">
		<svg version="1.1" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
			<rect width="200" height="100" style="fill:pink" >
				<animateTransform attributeName="transform" attributeType="XML" type="translate"
				from="-0,0" to="100,0"
				begin="0s" dur="2s"
				repeatCount="1"
				fill="freeze"
				/>
			</rect>
		</svg>
	</div>	

<!--animateMotion-->
	<div class="elmt3">
		<svg version="1.1" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
			<path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:none"/>
			<g>
				<circle r="10" />
				<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
					<mpath xlink:href="#chemin"/>
				</animateMotion>
			</g>
		</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.