Canvas experiments - easings

2015-Dec-25 11:42

An interactive demo of easings, demonstrated by drawing scenes on canvas. There are a couple of scenes:

• Arcs, drawing a familiar logo
• Star, drawing a star with arcs on the tips

For each of the scenes, several properties can be changed:

• Position 1, easing the first position (shape-dependent) from start to end
• Position 2, easing the second position (shape-dependent) from start to end
• Shape, easing the shape from not drawn to fully drawn (shape-dependent)
• Fill color, easing the fill color from transparent to fully colored
• Stroke color, easing the stroke color from transparent to fully colored
• Stroke width, easing the stroke width from 0 to full width

Playing with the controls below the canvas is the easiest way to get a feeling for what they do. You can click on already selected items to repeat the animation without changing the settings, in case you missed the animation that you find interesting.