Example 6: The Flying Green Inchworm

This example shows a simple path animation. Look at the string of numbers and letters given after the path element within the <smil:animateMotion> tag. Those are the x,y coordinates for our animation path. Click the button and watch the worm walk the path. Also notice that the repeatCount element is set for "indefinite", and the end command is set as an action — the animation will continue to loop until the user clicks the stop button.

<div style="width:220;height:180;">
 <div style="position:relative;top:0;left:0;;width:40;background-color:lime;"
  id="worm">wormy</div>

 <par repeatCount="indefinite" begin="startstar.click" end="stopstar.click">
  <smil:animateMotion targetElement="worm"
   path="M 8 65 L 72 65 92 11 112 65 174 65 122 100 142 155 92 121 42 155 60 100 z"
   dur="5" />
 </smil:par>
</div>