Animate using SMIL

(250,250) (500,250) (0,250) (250,0) (250,500) (500,0) (0,0) (0,500) (500,500)

Synchronized Multimedia Integration Language

We define 2 circles at 2 locations and animate them individually.

Note the value of the 'dur' attribute (duration). In the blue circle the 'cx' value is 2.7, while 'cy' has 3. In the red circle these 2 values are switched, resulting in a duplication of the blue circle but moving in the exact opposite direction.

This attribute controls how fast the object changes in either the 'x' (horizontal) or 'y' (vertical) direction.

This particular animation will repeat itself every 27 seconds, since 27 is the smallest number that is evenly divisible by both 3 and 2.7 — a necessary condition for the periodicities of cx and cy to synchronize.

<circle cx="50%" cy="20" r="7%" fill="blue">
<animate attributeName="cx" dur="2.7" values="5%;95%;5%" repeatCount="indefinite" />
<animate attributeName="cy" dur="3" values="5%;95%;5%" repeatCount="indefinite" />
</circle>
<circle cx="50%" cy="120" r="5%" fill="red">
<animate attributeName="cx" dur="3" values="5%;95%;5%" repeatCount="indefinite" />
<animate attributeName="cy" dur="2.7" values="5%;95%;5%" repeatCount="indefinite" />
</circle>

 

All done.