Compare Animation Easing Functions

The visual performance of an element's animation is generally based on its size or location. This compares various size/location animations at over 100 easing functions. The easing functions are from jQuery, D3, SVG.js, Kute.js, and Snap.js/Adobe.
Scenerio:
This provides the ability to compare two animations.
There are 4 circles and 2 output curves superimposed. Each animation is color-coded at red/blue.
The animation increases size of its larger circle, and moves its smaller circle from center to lower right.

1.) Select the Duration.
2.) Select the desired function for the blue and/or red animation.
3.) Select the desired Run button.

The plotted output curves can be used to see the difference between the various functions.

Selected Function:

Duration:
Note: Some of the different animations performance and the ouput curve are identical. However, their easing function may be different.

Tweek an easing function:
Place your function body below tweeker(p){
}

Duration:
Animation Easing Functions:
OK in:IE11/Edge/CH55/FF52