A rectangle with rounded corners moves from one corner to the diagonal corner, while also changing from blue to red and back.
<rect rx="5" ry="5" x="200" y="20" width="100" height="100" stroke="black" stroke-width="2">
<animate attributeName="x" attributeType="XML" dur="5s" values="10;400;10;" repeatCount="indefinite"/>
<animate attributeName="y" attributeType="XML" dur="5s" values="10;400;10;" repeatCount="indefinite"/>
<animate attributeName="fill" attributeType="CSS" dur="5s" values="blue;red;blue;" repeatCount="indefinite"/>
</rect>
It is important to specify the correct attributeType: choices are typically XML or CSS, depending on what the attributeName type is. Here the x and y coordinates are XML and the fill is CSS.
The brown circle bounces vertically from 1 corner to another in a "V" path. This is affected by both the x and y values, and the duration of the event: x is double the y path duration.
<circle cx="475" cy="30" r="25" fill="brown" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="xml" values="475;30;475" dur="5s" repeatCount="indefinite"/>
<animate attributeName="cy" attributeType="xml" values="30;475;30" dur="2.5s" repeatCount="indefinite"/>
</circle>
The green circle performs a similar bounce, but using the side walls in a "<" pattern. Observant viewers will also note that it too changes color several times.
<circle cx="470" cy="475" r="25" style="fill:green;stroke:black;stroke-width:2">
<animate attributeName="cx" attributeType="css" values="485;30;485" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="cy" attributeType="css" values="485;30;485" dur="5s" repeatCount="indefinite"/>
</circle>
In both circles, the attributeType works for all attributes as CSS or XML.
The timing of each event avoids crashes.