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.
transform: translateX({value}%);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
transform: translateX({value}%);