About the Direct Selection Tool
The direct selection tool is how you reshape a path. Press on a point and drag, and that point moves, taking its handles with it, while the rest of the path stays where it is. Press on a handle and drag, and the curve bends: on a smooth point, the handle on the other side swings round to keep the line smooth. Start from a ready-made triangle, square, circle or heart, or draw with the pen, then drag points and handles until the shape is right. When you want a handle to move alone and make a sharp bend, hold Alt while you drag it. The picture with the path drawn on it downloads as a PNG, and the path itself as SVG. Your picture stays in your browser.
Updated October 2026
How to use the Direct Selection Tool
- 1Select an image or drop one on the page.
- 2Choose a ready-made shape, or draw a path with the Pen tool.
- 3With Direct Selection chosen, drag a point to move it.
- 4Drag a blue handle to change how the curve bends. Hold Alt to move only that handle.
- 5Download the PNG or the SVG.
Points and handles
A path is made of points joined by curves. Each smooth point has two handles shown as blue lines ending in small circles. The curve leaves the point in the direction of its handle. The length of the handle sets how far the curve keeps going that way before it turns.
Reshaping tips
- Move points first to set the rough outline.
- Then pull handles to smooth or tighten each bend.
- Keep handles about a third of the distance to the next point.
- Handles that run along the line between two points make a nearly straight curve.
- Hold Alt for a handle that moves on its own, for a cusp or a sharp turn.
Smooth versus broken
On a smooth point the two handles are in line, so the path has no kink. If you want a kink while keeping the curves on both sides, move one handle with Alt held. The point then has handles that point in different directions.
Saving your work
The PNG has your path drawn on the picture in the colour and thickness you chose. The SVG contains only the path. You can copy its data from the Copy path data button and paste it into a vector program, an HTML file or a stylesheet.
Phone and computer
Handles and points have generous touch areas. On a phone, press on the handle's circle and drag. On a computer, use the mouse, and hold Alt for the single-handle move. Selecting a point is the first step before you move or change it. Pick a whole shape with the Path Selection Tool, convert a corner with the Convert Point Tool, and add detail using the Add Anchor Point Tool.
Features
- Seven path tools in one editor, so you can switch as you work
- Cubic bezier curves with draggable handles
- Undo for every step
- PNG download with the line drawn on your picture
- SVG download and copyable path data
- Private: your picture is edited in your browser and never uploaded
- Drag points and handles one at a time
- Smooth points keep their handles in line
- Hold Alt to move a handle on its own
Frequently asked questions
What is the difference between points and handles?
Points are where the path passes. Handles are the blue stalks that control how the curve leaves and enters a point.
How do I bend a curve?
Drag the handle on the end of a blue line. The curve leans towards the handle, and a longer handle makes a wider bend.
What does holding Alt do?
Normally the handle on the other side of a smooth point turns to stay in line. With Alt held, only the handle you drag moves, which makes a corner in the curve.
Does moving a point move its handles?
Yes. The handles travel with the point, so the curve shape around it is preserved.
Can I move several points at once?
Not in this tool. Use Path Selection to move the whole path.
Why did a handle stay put?
Points drawn with the Curvature Pen follow their neighbours until you drag a handle yourself.
How do I undo a bad drag?
Press Undo. Each drag counts as one step.
Is my picture uploaded?
No.