Presets

Settings

Auto hide anchor points

Enable snapping to grid

Enable snapping to points

Animation duration

SVG Path

Keyboard Shortcuts

Toggle anchor point smooth corner

Shift + Click on the anchor point.

Enabling smooth corners hides the control points attached to the anchor, aligning them precisely with the anchor's position.
Add new anchor point

Alt + Click on the graph path.
Delete an anchor point

Delete the selected anchor point

The first and last anchor points cannot be deleted.
Move control point independently

Alt + Drag the control point.

When the control points are realigned, they automatically move together again.
Lock movement to an axis

Shift + Drag the anchor/control point.
Pan the graph panel

Space + Drag the graph panel.
Center the graph panel

Double Click on the graph panel.
Zoom in and out

Mouse Wheel over the graph panel.
Undo changes

Ctrl + Z
Redo changes

Ctrl + Y

Export as CSS Keyframes

The current path uses a single curve, which can be represented with the CSS cubic-bezier() function. Consider using multiple curves to generate the result as a keyframes animation.

Property

transform: translateX({value}%);

Samples

From

Export as CSS linear()

The current path uses a single curve, which can be represented with the CSS cubic-bezier() function. Consider using multiple curves to generate the result as a linear() css function.

Samples

Name

Export as SVG

Scale

Export as JavaScript function

Samples

Name