xEllipse - Time-Based Elliptical Animation



function xEllipse(e, xRadius, yRadius, radiusInc,
                  totalTime, startAngle, stopAngle)


  • e - an Element reference or ID string.
  • xRadius - the horizontal radius of the ellipse. Must be > 0.
  • yRadius - the vertical radius of the ellipse. Must be > 0.
  • radiusInc - the integer change in radius per iteration. Can be negative. Provides for some interesting effects.
  • totalTime - the total duration of the animation in milliseconds. Must be > 0.
  • startAngle - start angle in degrees.
  • stopAngle - stop angle in degrees. If (stopAngle - startAngle) is positive then the animation will be clockwise. if it is negative then the animation will be counter-clockwise. (stopAngle - startAngle) must be non-zero.

You Get To Play...

Define your own values to pass to xEllipse(). The same arguments are passed to each of the demo elements. The 'Reset' button repositions the demo elements in the center of the page.

X Radius

Y Radius

Radius Change

Duration (ms)

Start Angle (deg)

Stop Angle (deg)


I Get To Play...

Each function call is in a for loop which calls xEllipse() for each demo element. a1 is a convenience variable I used. It is the start angle of each element (ele1=0, ele2=90, ele3=180, ele4=270).

xEllipse(ele[i], 200, 100, 0, 10000, a1, 2880+a1);

xEllipse(ele[i], 100, 200, 0, 10000, 2880+a1, a1);

xEllipse(ele[i], 200, 100, 0, 5000, 0, -360);

xEllipse(ele[i], 100, 200, 0, 5000, -360, 0);

xEllipse(ele[i], 400, 300, -1, 5000, 0, 720);

xEllipse(ele[i], 300, 400, -1, 5000, a1, 720+a1);

xEllipse(ele[i], 2, 2, 1, 10000, i * 360, 0);

xEllipse(ele[i], 2, 2, 1, 10000, 720+a1, a1);


xEllipse is part of the X Library as of v3.15.3.


By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

About Cross-Browser.com

Cross-Browser.com is the home of X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

Browser Support

The X core is designed to work with all browsers, Object-detection instead of browser-detection is used exclusively. Currently, I'm testing with the following browsers. X has been tested by others on a wide variety of platforms.

Win7 (Home): IE 9.

WinXP (SP3): Chrome, Firefox 3.5.5, IE 7 & 8, Opera 10.60 and Safari 4.0.3.

Linux (Ubuntu 9.10): Chrome and FireFox 3.5.7.


This site and all its javascript were developed with UltraEdit, a most excellent programmer's editor.



World Wide Web