Ellipse Animation 1.1

A1 A2 1 2 3 4

Here we show several animations with an ellipse. It is useful to see how each is done by viewing the source code.

Ellipse 1 is a static ellipse using a path statement.

The red #2 ellipse animates a small dot around the path of the ellipse.

Blue #3 animates the whole ellipse clockwise around its center point, then counter-clockwise.

Finally, the green ellipse #4 revolves around the center of the SVG coordinate system at 250,250.

Timing of each event can be precisely controlled.

This is all in preparation for our next event: sliding the ellipse around a circle to create an elliptical cycloid.