Summary -

In this topic, we described about the SVG Animation with detailed example.

<svg> with <animateMotion> element is used to apply animation to element. The attributes of animation specified below -

Attribute Use
path M requires moveto, V requires vertical, H requires straight, Z requires back up to first structure.
dur Period of animation (in s), know how to be 1s, 2s or more.
repeatCount Can be a amount, or undetermined for inifinite counts.

Example -

Below example describes about how to animate element.
<!DOCTYPE html>
<html>
	<body>
 		<svg height="150" width="300">    
			<g>
				<circle cx="50" cy="50" r="40" fill="green"></circle>
				<animateMotion path="M 0 0 V 0 H 50 Z" dur="10s"
					repeatCount="indefinite"/>
			</g>
		</svg>    
	</body>
</html>

Output -