Help & Shortcuts

1. Load a reference image (from file or URL) so you can trace over it.
2. Trace the shapes with Polygon, Rect, Circle, Line, or Pen tools.
3. Refine by selecting points and dragging to adjust; use Shift to constrain and Alt for corners/handle tweaks. Press Enter to close shapes, Esc to cancel.
4. Style your fill, stroke (color/width/opacity), and corner radius. Toggle grid/zoom as needed.
5. Animate by choosing an animation preset and timing (duration & stagger).
6. Export either the HTML wrapper (ready to open) or copy the raw SVG for your site/app.

Polygon

• Click to add points. Click the first point or press Enter to close.
• Drag points to edit. Use Radius to round corners live.
• Pro Alt+Click a polygon point → converts that point to a Pen anchor and adds handles.

Rectangle

• Click first corner → drag → release/click again to commit.
• Drag any corner to resize. Hold Shift for a perfect square.
• Pro Alt+Click a corner → converts to a Pen path at that corner with handles.

Circle

• Click to set center → move → click again to commit.
• Drag the center or radius handle to edit.
• Circles respect Fill and (optional) Stroke styles live.

Line

• Click start → move → click end. Endpoints are draggable.
• Hold Shift while drawing or editing to snap to 0/45/90°.
• Lines always use Stroke (Fill is ignored by design).

Pen (Bézier)

• Click adds anchors; click+drag while placing to pull handles (no drag = no handles).
• Alt while dragging makes a corner; Shift snaps handle angles to 45°.
• Double-click or Enter to close.
• H adds symmetric handles to the selected anchor (also works after converting a Poly/Rect point).

Select / Move

• Click a shape to select; drag to move the whole shape.
• Hold Shift while dragging to constrain to the dominant axis.
• Delete/Backspace removes the selected point or shape.
• Alt + Drag on selected shape(s): duplicate and drag the copy

Close

Commits the in-progress Polygon/Rectangle/Pen. Same as Enter.

Undo point

Removes the last point from the in-progress Polygon or Pen.

Undo shape

Global undo (Ctrl/Cmd+Z). Redo with Ctrl/Cmd+Shift+Z.

Delete

Deletes selected point/handle or the whole shape (contextual).

Reset

Clears all shapes and working paths (keeps your loaded background).

Export

Builds an animated SVG (or a ready HTML file from the Export dialog). Live Fill/Stroke are preserved per-shape.

General

• Ctrl/Cmd + Z Undo
• Ctrl/Cmd + Shift + Z Redo
• Enter Close current Polygon/Pen
• Esc Cancel in-progress shape
• Delete/Backspace Delete selected point/shape
• ? Open Help

By tool

• Polygon: first-point click closes • Alt+Click point → convert to Pen + handles
• Rectangle: hold Shift while drawing to square • Alt+Click corner → convert to Pen + handles
• Circle: drag center or radius handle to edit
• Line: hold Shift for 0/45/90°
• Pen: H add symmetric handles on selected anchor