Toggle light and dark mode Help Source on GitHub
Hide side panel
Play Pause Stop Preview the curve on a shape

Presets


Delete the selected preset
Save to local storage

Generate

Build a curve from a spring, wobble, back or poly function. Drag the sliders to shape it, then edit the result like any other curve.

Settings

Auto hide anchor points when the graph path is not focused
Enable snapping to the grid visible lines
Enable snapping to points and their horizontal/vertical guide lines

SVG Path

The curve as an SVG path. Edit it here or paste one in to draw it, following M x y C cx1 cy1 cx2 cy2 x y .
Show side panel
Toggle light and dark mode Help Source on GitHub

Help

Anchor points

Add an anchor point

Alt + Click or Long press

Delete an anchor point

The first and last anchor points cannot be deleted.

Delete or

Toggle a smooth corner

A smooth corner hides both control points and pins them to the anchor.

Shift + Click or

Dragging

Move one control point on its own

Line the two back up and they move together again.

Alt + Drag or

Hold a drag to one axis

Shift + Drag or

The view

Fit the curve to the view

Double click or

Pan the graph panel

Space + Drag or Pinch

Zoom in and out

Wheel or Pinch

History

Undo

Ctrl + Z or

Redo

Ctrl + Y or

Preview

Play or stop Loop
Move X Move Y
Scale Scale X Scale Y Width Height
Rotate Flip X Flip Y Skew
Fade Round Color

Export as CSS Keyframes

Property 
transform: translateX({value}%);
More keyframes means a closer match and longer CSS. Past a point it stops looking any different.
A preview of the exported easing. If it still matches the curve you drew, you have enough keyframes.

Export as CSS linear()

More points means a closer match and longer CSS. Past a point it stops looking any different. A preview of the exported easing. If it still matches the curve you drew, you have enough points.

Export as SVG

A preview of the SVG below.

Export as GSAP CustomEase

Export as Android interpolator

Export as Jetpack Compose easing

Export as Flutter curve

Export as iOS keyframes

Export as JavaScript function