1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5519],{3920:(e,n,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/path-edit-widget",function(){return t(9675)}])},9675:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a});var i=t(7876),s=t(1668),r=t(1719);let o=function(e){let{children:n}=e;return(0,i.jsx)(r.A,{meta:{title:"Path Editing: Anchor Points, Curves & Snapping",description:"Draw paths with the Pen tool, drag to pull out b\xe9zier curve handles, edit anchors, round corners, and snap to guides â all in your browser, nothing uploaded.",keywords:["draw bezier curves in browser","pen tool online","drag to curve pen tool","edit path from psd","edit svg path online","bezier curve editor browser","anchor point editing","vector path tool","convert corner to smooth point","edit vector mask path"]},children:n})};function l(e){let n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"path-editing-tool",children:"Path Editing Tool"}),"\n",(0,i.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,i.jsx)(n.p,{children:"The Path Editing Tool provides a powerful way to create and modify vector paths in Figpea. With this tool, you can precisely control every aspect of your SVG paths, from simple lines to complex curves with multiple control points."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/path-edit-widget-screenshot.png",alt:"Path Edit Tool"})}),"\n",(0,i.jsx)(n.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsx)(n.p,{children:"To edit a path:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Select a path layer in your document"}),"\n",(0,i.jsxs)(n.li,{children:["Press ",(0,i.jsx)(n.strong,{children:"Enter"}),' or click the "Edit Path" button in the properties panel (pressing ',(0,i.jsx)(n.strong,{children:"Enter"})," on a non-path shape converts it to a path first)"]}),"\n",(0,i.jsx)(n.li,{children:"The path editing interface will appear, showing all anchor points and control handles"}),"\n",(0,i.jsxs)(n.li,{children:["When you're done, leave path editing with ",(0,i.jsx)(n.strong,{children:"Esc"}),", ",(0,i.jsx)(n.code,{children:"Ctrl/Cmd + Enter"}),", or the ",(0,i.jsx)(n.strong,{children:"Stop Editing"})," button in the properties panel. Your edits are kept â leaving the mode never discards them."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/enter-vector-edit-shortcut.webp",alt:"Entering vector edit mode on a path layer in Figpea using the Enter keyboard shortcut"})}),"\n",(0,i.jsx)(n.h2,{id:"drawing-a-new-path-with-the-pen",children:"Drawing a New Path with the Pen"}),"\n",(0,i.jsx)(n.p,{children:"The Pen (P) tool lets you create custom vector paths from scratch directly on the canvas:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Activating the Pen"}),": Press ",(0,i.jsx)(n.strong,{children:"P"})," or select ",(0,i.jsx)(n.strong,{children:"Pen"})," from the main toolbar."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Placing corner points"}),": Click anywhere on the canvas to place sharp corner points."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Drag to curve"}),": Click and press-drag as you place an anchor point to pull out a b\xe9zier curve handle. Without modifiers, the drag steers where the path goes next and the segment behind stays straight â hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while dragging instead to curve both sides."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Shift-drag (smooth points)"}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while dragging an anchor point to curve both sides with mirrored handles."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Closing the path"}),": Click near the first point to close the loop into a closed shape."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Finishing an open path"}),": Press ",(0,i.jsx)(n.strong,{children:"Esc"})," or ",(0,i.jsx)(n.code,{children:"Ctrl/Cmd + Enter"})," to complete an open path."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Undo"}),": Placing an anchor point, including pulling out its handle curvature, is a single undo step."]}),"\n"]}
1),"\n",(0,i.jsxs)(n.p,{children:["For more details on converting point types after placement, see ",(0,i.jsx)(n.a,{href:"#converting-point-types",children:"Converting Point Types"}),". To learn more about vector operations, see ",(0,i.jsx)(n.a,{href:"/docs/advanced-layer-operations#vector-operations",children:"Vector Operations"}),"."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/pen-drag-to-curve.webp",alt:"Drawing a vector path with the Pen tool in Figpea, dragging to pull out curve handles"})}),"\n",(0,i.jsx)(n.h2,{id:"editing-tools",children:"Editing Tools"}),"\n",(0,i.jsx)(n.p,{children:"The path editor provides three main tools, accessible from the toolbar at the bottom of the screen:"}),"\n",(0,i.jsx)(n.h3,{id:"select-tool",children:"Select Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Select Tool is your primary tool for modifying existing paths:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Select points"}),": Click on any anchor point to select it"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Multi-select"}),": Hold Shift while clicking to select multiple points"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Rectangle selection"}),": Drag in empty space to create a selection rectangle"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Additive rectangle selection (",(0,i.jsx)(n.code,{children:"Shift + drag"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while dragging a selection rectangle in empty space to add every enclosed anchor point to your existing selection instead of replacing it â the same behaviour as the Lasso tool. Like the Lasso, this selects ",(0,i.jsx)(n.strong,{children:"anchor points only"})," â not segments and not b\xe9zier handles."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Move points"}),": Drag selected anchor points to reposition them"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Adjust curves"}),": Drag control handles (purple dots) to change curve shape"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Convert point types"}),": Double-click on a point to toggle between smooth and corner points"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Parallel handle movement"}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," and click multiple control handles (purple dots) to select them. Dragging any selected handle with ",(0,i.jsx)(n.strong,{children:"Shift"})," held translates all selected handles together in parallel in the same direction, preserving their relative positions."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/parallel-handle-move.webp",alt:"Animation showing parallel handle movement in Figpea when dragging multiple selected b\xe9zier handles with Shift held."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/parallel-handle-move-still.webp",alt:"Still showing parallel handle movement in Figpea with selected handles post-move."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/additive-marquee-shift.webp",alt:"Dragging a selection rectangle with Shift held adds every enclosed anchor point to the anchors already selected, with the canvas panned off-origin so the marquee tracks the cursor exactly."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/additive-marquee-shift-still.webp",alt:"End state after the Shift-drag marquee: the newly enclosed anchor points have joined the previously selected anchor."})}),"\n",(0,i.jsx)(n.h3,{id:"add-tool",children:"Add Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Add Tool lets you extend your path with new segments:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Add points"}),": Click anywhere to add a new anchor point"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Preview"}),": As you move your cursor, a preview line shows where the new segment will appear"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Complete segment"}),": Click to place the point and create the segment"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Close path"}),": Click near the starting point to close the path"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"insert-tool",children:"Insert Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Insert Tool allows you to add detail to existing paths:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Insert between points"}),": With an anchor selected, activate Insert Tool to add points between existing segments"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"On-path anchor insertion"}),": hover near any straight line or curve segment (Pen ",(0,i.jsx)(n.code,{children:"P"})," sub-tool active) to see a preview marker on the path outline."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Shape-neutral placement"}),": click on the path to insert a new anchor point directly at the projected position."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Automatic curve splitting"}),": straight segments gain a point exactly on the line; curved segments perform a de Casteljau split, adjusting neighboring handles so the rendered shape stays 100% unchanged."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Subpath safety & undo"}),": the new anchor lands in the hovered subpath only, and the whole insertion reverts in a single ",(0,i.jsx)(n.code,{children:"Cmd/Ctrl+Z"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Drag-to-curve placement"}),": Press and drag while placing a point (or when extending an existing open path) to pull out a curve handle on the fly; hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while dragging to curve both sides with mirrored handles"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Maintain curves"}),": When inserting between curved segments, the tool preserves the original curve shape"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Close path"}),": Click near the first point of an open path to close it with a smooth curve"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/insert-anchor-on-
1path.webp",alt:"Inserting a shape-neutral anchor point on a vector path segment using the Pen tool in Figpea"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/insert-anchor-on-path-still.webp",alt:"Inserting a shape-neutral anchor point on a vector path segment using the Pen tool in Figpea"})}),"\n",(0,i.jsx)(n.h3,{id:"bend-tool",children:"Bend Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Bend Tool provides a direct-manipulation gesture for bending vector path segments into curves and adding b\xe9zier handles:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Activate Bend Tool"}),": Select ",(0,i.jsx)(n.strong,{children:"Bend"})," from the vector editing secondary toolbar at the bottom of the canvas (or click its icon after Lasso)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Bend Path Segments"}),": Hover over any straight or curved path segment to reveal a green highlight and grab cursor. Click and drag anywhere on the segment away from anchor points to pull it into a curve following your pointer live. Bounding anchors automatically gain or adjust handles facing that segment without moving adjacent segments."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Convert Corner Anchors"}),": Click directly on a sharp corner anchor (a point with no handles) to convert it into a curved point with new b\xe9zier handles aligned along the local tangent."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Cancel Gesture (",(0,i.jsx)(n.code,{children:"Esc"}),")"]}),": Press ",(0,i.jsx)(n.strong,{children:"Esc"})," mid-drag to cancel an in-flight bend gesture and revert path geometry."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Single Undo Step"}),": Bending a segment or converting an anchor with the Bend tool is recorded as a single undo step (",(0,i.jsx)(n.code,{children:"Cmd/Ctrl + Z"}),")."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/bend-tool-segment-curve.webp",alt:"Animation showing the Bend tool in Figpea dragging a straight vector path segment into a smooth curve and adding b\xe9zier handles to a corner anchor."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/bend-tool-segment-curve-still.webp",alt:"Still showing the Bend tool in Figpea with completed curved segment and active handles."})}),"\n",(0,i.jsx)(n.h3,{id:"paint-tool-shift--b",children:"Paint Tool (Shift + B)"}),"\n",(0,i.jsx)(n.p,{children:"The Paint Tool fills individual closed regions of a path â including the regions formed where two or more subpaths overlap â instead of coloring the whole layer at once:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Activate Paint Tool"}),": Press ",(0,i.jsx)(n.strong,{children:"Shift + B"}),", or select ",(0,i.jsx)(n.strong,{children:"Paint"})," from the vector editing secondary toolbar (right after Bend), while vector edit mode is active. Outside vector edit mode, ",(0,i.jsx)(n.code,{children:"Shift + B"})," does nothing."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Hover a Region"}),": Moving the pointer over the artwork highlights the closed region directly under it with a diagonal stripe hatch, and the cursor shows a droplet with a plus over an unfilled region or a droplet with a minus over a filled one. Hovering the partially-enclosed area of an unclosed (open) path shows no hatch and an unfillable droplet cursor â clicking there does nothing."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Click to Fill or Unfill"}),": Clicking an unfilled region fills it with Figpea's default fill color; clicking an already-filled region removes its fill. Only the clicked region changes â every other region, including the non-overlapping parts of an overlap region, is left exactly as it was. Each click is a single undo step (",(0,i.jsx)(n.code,{children:"Cmd/Ctrl + Z"}),")."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Edit a Region's Color"}
1),": Clicking a region selects it, and the right sidebar's Fill section scopes to it â a ",(0,i.jsx)(n.strong,{children:"Region"})," chip appears beside the Fill label, and changing the color there (solid colors only) updates only that region."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Overlapping Subpaths"}),": Where two subpaths overlap, the overlap is its own independently fillable region â filling or clearing it never touches the two subpaths' non-overlapping areas."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Persistence & Export"}),": Per-region fills are saved with the project and reproduced faithfully in SVG export, matching the on-canvas render."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/paint-tool-fill-region.webp",alt:"Animation showing the Paint tool in Figpea hovering a closed region of overlapping circles with a diagonal hatch, clicking to fill it, recoloring it through the right sidebar's region-scoped Fill section, and hovering the independently fillable overlap region."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/paint-tool-fill-region-still.webp",alt:"Still showing the Paint tool in Figpea with one region filled and recolored, its Region chip in the sidebar Fill section, and the independent overlap region hatched on hover."})}),"\n",(0,i.jsx)(n.h3,{id:"lasso-tool",children:"Lasso Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Lasso Tool lets you select anchor points with a freeform drag gesture in vector edit mode:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Activate Lasso Tool"}),": Press ",(0,i.jsx)(n.strong,{children:"Q"})," or select ",(0,i.jsx)(n.strong,{children:"Lasso"})," from the path editing secondary toolbar at the bottom of the canvas."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Freeform Selection"}),": Click and drag to draw a freeform loop around the anchor points you want to select. On pointer release, the selection loop automatically closes by connecting the release point back to the start point."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Screen-Space Hit Testing"}),": Anchor enclosure is evaluated in screen space against rendered anchor dots, keeping selection accurate across rotated, scaled, or sheared vector layers."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Additive Selection (",(0,i.jsx)(n.code,{children:"Shift + Drag"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while drawing with the Lasso tool to add newly enclosed anchor points to your existing selection without clearing prior selections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Cancel Selection (",(0,i.jsx)(n.code,{children:"Esc"}),")"]}),": Press ",(0,i.jsx)(n.strong,{children:"Esc"})," while drawing a lasso loop to abandon the drag gesture without changing the current selection, returning to the Select tool while keeping vector edit mode active."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Consuming Operations"}),": Selected anchor points can be translated together, deleted (",(0,i.jsx)(n.code,{children:"Delete"}),"), converted (",(0,i.jsx)(n.code,{children:"Convert To"}),"), or rounded (",(0,i.jsx)(n.code,{children:"Round Corners"}),") in a single step. Note that Lasso currently selects anchor points only (not path segments/edges or b\xe9zier handles)."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/lasso-tool-selection.webp",alt:"Animation showing drawing a freeform lasso loop around anchor points on a vector path in Figpea to select them."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/additive-lasso-shift.webp",alt:"Demonstration of additive lasso anchor selection in Figpea using the Shift key to select multiple point groups."})}),"\n",(0,i.jsx)(n.h3,{id:"cut-tool",children:"Cut Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Cut Tool lets you divide vector objects exactly where you want:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Toolbar & Shortcut"}),": Activate the Cut tool via the secondary toolbar or by pressing ",(0,i.jsx)(n.strong,{children:"C"})," while vector edit mode is active."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Click-to-split"}),": Click an anchor point to open a closed path, or click a position along an open-path segment to split it into two subpaths, preserving the rendered outline."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Drag-to-divide"}),": Drag a straight cut line across a closed shape to divide it into two sibling layers, both inheriting the source layer's fill, stroke, opacity, blend mode, and effects, with names derived from the original layer."]}
1),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Live preview & gestures"}),": The hover split indicator and drag preview line show exact intersection points; ",(0,i.jsx)(n.strong,{children:"Esc"})," cancels an active drag without modifying geometry; ",(0,i.jsx)(n.strong,{children:"Cmd/Ctrl+Z"})," undoes the entire cut gesture in a single history step."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Scope boundary"}),": Cut divides along a straight line only and confines a divide to layers already in the current vector edit session."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/cut-tool-click-split.webp",alt:"Animation showing splitting a vector path at a segment position using the Cut tool in Figpea."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/cut-tool-drag-divide.webp",alt:"Animation showing dragging a cut line across a closed vector shape with the Cut tool in Figpea to divide it into two sibling layers."})}),"\n",(0,i.jsx)(n.h3,{id:"variable-width-tool",children:"Variable Width Tool"}),"\n",(0,i.jsx)(n.p,{children:"The Variable Width tool allows you to change a stroke's thickness at any point along a vector path in vector edit mode:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"How to Activate"}),": Select a path layer with a solid stroke, enter path editing mode (",(0,i.jsx)(n.code,{children:"Enter"}),"), and activate ",(0,i.jsx)(n.strong,{children:"Variable width"})," from the secondary toolbar at the bottom of the canvas."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Adding Width Points"}),": Hover the pointer over the stroke to preview a width handle at the projected position; click to place a new width point."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Adjusting Stroke Thickness"}),": Drag the width handles outward or inward to expand or contract the stroke thickness at that position. The rendered stroke smoothly tapers between neighboring width points or path ends. You can also select a width point and type an exact numeric width in the Inspector's width field."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Repositioning & Multi-Selection"}),": Drag any width point along the path outline to move it to a new location while preserving its thickness value. ",(0,i.jsx)(n.code,{children:"Shift + click"})," to select multiple width points; press ",(0,i.jsx)(n.code,{children:"Delete"})," to remove selected width points and restore uniform stroke width in those regions."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Snapping & Overrides"}),": Width points automatically snap to vector anchor points, midpoints between vector anchors, and midpoints between existing width points. Hold ",(0,i.jsx)(n.code,{children:"Ctrl"})," during the drag gesture to temporarily bypass snapping."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Declining Conditions & Split Vector"}),":","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Dashed Strokes"}),": Variable width declines on dashed strokes with an explicit message (",(0,i.jsx)(n.em,{children:'"Variable width is not supported on dashed strokes"'}),")."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Branching Paths / Multiple Subpaths"}),": Variable width declines on paths with multiple subpaths (",(0,i.jsx)(n.em,{children:'"Variable width requires a single subpath"'}),"). Right-click the multi-subpath layer on canvas and select ",(0,i.jsx)(n.strong,{children:"Split vector"})," to separate it into individual single-subpath layers using Figpea's ",(0,i.jsx)(n.code,{children:"splitPath()"})," engine, after which Variable width accepts each resulting layer."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Rendering, Export & Undo"}),": Variable-width strokes render on canvas as filled outlines that follow the width profile, and ",(0,i.jsx)(n.strong,{children:"SVG export reproduces the same filled outline without clipping"})," â the exported document's framing encompasses the full variable-width extent, even on widening profiles, matching the on-canvas render. Every width-point modification (add, handle drag, numeric edit, reposition, delete, split) reverts in a single Cmd/Ctrl+Z step."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For more details, see ",(0,i.jsx)(n.a,{href:"/docs/advanced-layer-operations#vector-operations",children:"Vector Operations"})," and ",(0,i.jsx)(n.a,{href:"/docs/exporting",children:"Exporting"}),"."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/variable-width-tool-demo.webp",alt:"Animated demonstration of using the Variable Width tool in Figpea: hovering a stroke to preview a handle, adding a width point, dragging handles to expand stroke thickness, and sliding the width point along the path."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/variable-width-tool-still.webp",alt:"Still capture of Figpea's Variable Width tool active on a vector path, displaying width point handles along the tapered stroke and the numeric width inspector input."})}),"\n",(0,i.jsx)(n.h3,{id:"transforming-multiple-anchor-points-bounding-box",children:"Transforming Multiple Anchor Points (Bounding Box)"}),"\n",(0,i.jsx)(n.p,{children:"When you select two or more anchor points in vector edit mode, an interactive bounding box appears around them, allowing you to adjust their size, position, and rotation as a group without affecting the rest of the vector network:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Scale anchors"}),": Drag any corner or edge handle to scale selected anchor points and their attached b\xe9zier handles about the opposite handle. Unselected anchors remain stationary."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Proportional scale (",(0,i.jsx)(n.code,{children:"Shift"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while dragging a handle to preserve the aspect ratio of the selected anchor group."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Scale from center (",(0,i.jsx)(n.code,{children:"Alt/Option"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Alt"})," (Windows) / ",(0,i.jsx)(n.strong,{children:"Option"})," (macOS) while dragging to scale the points relative to the center of the selection bounding box."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Rotate anchors"}),": Move the pointer slightly outside a corner handle until the rotation cursor appears, then drag to rotate selected anchors about the box center."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Snap rotation (",(0,i.jsx)(n.code,{children:"Shift"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," while rotating to snap the rotation angle to 15\xb0 increments."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Reposition mid-gesture (",(0,i.jsx)(n.code,{children:"Space"}),")"]}),": Press and hold ",(0,i.jsx)(n.strong,{children:"Space"})," during an active scale or rotate gesture to translate the selection across the canvas. Releasing ",(0,i.jsx)(n.strong,{children:"Space"})," resumes the scale or rotate operation from the new position."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Undo"}),": Each completed transform gesture reverts in a single ",(0,i.jsx)(n.strong,{children:"Cmd/Ctrl + Z"})," step."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/multi-point-bounding-box-transform.webp",alt:"Animated demonstration of multi-point vector editing in Figpea: selecting anchor points, scaling with Shift for proportional aspect ratio, rotating with 15-degree angle snapping, and holding Space to reposition mid-gesture."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/multi-point-bounding-box-transform-still.webp",alt:"Still screenshot showing the multi-point vector transform bounding box and handles active over selected anchor points in Figpea."})}),"\n",(0,i.jsx)(n.h2,{id:"multi-layer-vector-editing",children:"Multi-Layer Vector Editing"}),"\n",(0,i.jsx)(n.p,{children:"You can edit multiple vector paths in a single session without losing your tool state or anchor selections:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Multi-selection entry"}),": Select two or more path/shape layers on canvas and press ",(0,i.jsx)(n.strong,{children:"Enter"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Adding layers (",(0,i.jsx)(n.code,{children:"Shift + click"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Shift"})," and click on the body of another path layer on canvas to add it to your active vector edit session."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Switching layers (",(0,i.jsx)(n.code,{children:"Cmd/Ctrl + click"}),")"]}),": Hold ",(0,i.jsx)(n.strong,{children:"Cmd"})," (macOS) / ",(0,i.jsx)(n.strong,{children:"Ctrl"})," (Windows) and click on the body of another path layer to switch the session directly to that layer."]}
1),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Anchor dot disambiguation"}),": Clicking directly on an anchor or control point with ",(0,i.jsx)(n.strong,{children:"Cmd/Ctrl"})," held still adds/modifies anchor selections and never triggers a layer switch."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Per-layer undo"}),": Edits to each layer in the session are independently isolated in history. Pressing ",(0,i.jsx)(n.code,{children:"Cmd/Ctrl + Z"})," undoes your last vector modification in reverse order."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Escape ladder"}),": Pressing ",(0,i.jsx)(n.strong,{children:"Esc"})," once clears anchor selections while keeping the multi-layer session active; pressing ",(0,i.jsx)(n.strong,{children:"Esc"})," a second time exits vector edit mode entirely."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/multi-layer-vector-edit.webp",alt:"Demonstration of multi-layer vector editing in Figpea: adding and switching vector layers during a single vector edit session"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/multi-layer-vector-edit.png",alt:"Multi-layer vector editing end state in Figpea"})}),"\n",(0,i.jsx)(n.h2,{id:"editing-a-masks-path",children:"Editing a mask's path"}),"\n",(0,i.jsxs)(n.p,{children:["A vector mask is a shape with a path, so it edits like one. Select the mask layer â the row carrying the mask indicator (see ",(0,i.jsx)(n.a,{href:"/docs/masks",children:"Masks"})," for how to spot it) â and press ",(0,i.jsx)(n.strong,{children:"Enter"})," or click ",(0,i.jsx)(n.strong,{children:"Edit Path"}),", exactly as for any path. Anchors and b\xe9zier handles appear on the mask's outline, and the Select, Add, Insert, Bend, and Cut tools all work the same way they do on any other path."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/vector-editing/mask-path-edit-entry.webp",alt:"A vector mask layer selected in Figpea with vector edit mode active, its outline showing anchor points with b\xe9zier handles, the masked artwork clipped to the shape on the canvas"})}),"\n",(0,i.jsxs)(n.p,{children:["This only applies to masks with path geometry â a shape layer used as a mask. An alpha mask on an image, text, or folder layer has no path to edit, so pressing ",(0,i.jsx)(n.strong,{children:"Enter"})," there does nothing."]}),"\n",(0,i.jsx)(n.p,{children:"Drag an anchor or handle and the masked render follows the edit live: the clipped content reshapes as you pull."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/vector-editing/mask-path-edit-drag.webp",alt:"Animation of dragging an anchor point on a vector mask's path in Figpea, the masked artwork reshaping live as the outline is pulled"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/vector-editing/mask-path-edit-drag-still.webp",alt:"Still showing the end state after dragging a vector mask anchor in Figpea, with the masked artwork clipped to the reshaped outline"})}),"\n",(0,i.jsxs)(n.p,{children:["Like any path edit, the change undoes with ",(0,i.jsx)(n.strong,{children:"Cmd/Ctrl + Z"}),". For handle work, see ",(0,i.jsx)(n.a,{href:"#converting-point-types",children:"Converting Point Types"}),". To create, retype, or remove a mask, see ",(0,i.jsx)(n.a,{href:"/docs/masks",children:"Masks"})," â this section is about reshaping the outline your file brought with it."]}),"\n",(0,i.jsx)(n.h2,{id:"path-operations",children:"Path Operations"}),"\n",(0,i.jsx)(n.h3,{id:"working-with-points",children:"Working with Points"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Delete points"}),": Select one or more points and click the Delete button"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Insert after"}),": Select a point and click Insert After to add a new point after it"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Remove segment"}),": Select a point and click Remove Segment to delete the entire segment"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"converting-point-types",children:"Converting Point Types"}),"\n",(0,i.jsx)(n.p,{children:"You can convert selected points to different types using the Convert To menu:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Line segments"}),": Creates straight lines with corner points"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Curve segments"}),": Creates smooth B\xe9zier curves"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Horizontal/vertical lines"}),": Creates perfectly horizontal or vertical line segments"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"opening-and-closing-paths",children:"Opening and Closing Paths"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Close path"}),": Connect the last point to the first point to create a closed shape"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Open path"}),": Break a closed path to create an open path"]}),"\n"]}
1),"\n",(0,i.jsx)(n.h3,{id:"round-corners",children:"Round Corners"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Round Corners"})," replaces each selected corner with a clean tangent arc of the radius you type â softening a logo, rounding a polygon or star, or taking the hard edges off an imported path."]}),"\n",(0,i.jsxs)(n.p,{children:["To apply Round Corners, first open ",(0,i.jsx)(n.strong,{children:"Edit Path"})," mode by selecting a path layer and clicking the Edit Path button. Select one or more corner points (Shift-click to add to the selection, or drag a selection rectangle around multiple points), then click the ",(0,i.jsx)(n.strong,{children:"Round Corners"})," button, type a radius value, and click ",(0,i.jsx)(n.strong,{children:"Apply"}),". The operation applies only to the corners you selected, and all selected corners are rounded with a single radius valueâper-corner radii are not supported."]}),"\n",(0,i.jsx)(n.p,{children:"This is a destructive operation: one undo reverses it completely. If you apply Round Corners again to a corner that is already rounded, nothing happensâthose points n
1ow sit on a curved segment, and curved corners are skipped."}),"\n",(0,i.jsx)(n.p,{children:"Only corners between straight segments can be rounded. A corner with a curved segment on either side is skipped, and the rest of your selection is still rounded; the count of roundable corners is shown before you apply so you know what to expect. A radius too large for a corner is automatically reduced to the largest radius that fits, rather than being silently ignored."}),"\n",(0,i.jsxs)(n.p,{children:["This is ",(0,i.jsx)(n.strong,{children:"not"})," the rectangle's ",(0,i.jsx)(n.strong,{children:"corner radius"})," property in the Rect section of the Inspector, which stays live and re-editable and can carry four different values per corner. ",(0,i.jsx)(n.strong,{children:"Round Corners"})," rewrites the path itself: a rectangle's corner radius exports as CSS ",(0,i.jsx)(n.code,{children:"border-radius"}),", while a rounded path exports as path geometry."]}),"\n",(0,i.jsxs)(n.p,{children:["For more about working with anchor points, see ",(0,i.jsx)(n.a,{href:"#working-with-points",children:"Working with Points"})," and ",(0,i.jsx)(n.a,{href:"#converting-point-types",children:"Converting Point Types"}),". To learn more about vector operations, see ",(0,i.jsx)(n.a,{href:"/docs/advanced-layer-operations#vector-operations",children:"Vector Operations"}),". For information about exporting your rounded paths, see ",(0,i.jsx)(n.a,{href:"/docs/exporting",children:"Exporting"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"parametric-corner-radius-right-sidebar",children:"Parametric Corner radius (Right Sidebar)"}),"\n",(0,i.jsxs)(n.p,{children:["Beyond the toolbar operation above, Figpea also offers a live, re-editable ",(0,i.jsx)(n.strong,{children:"Corner radius"})," property in the right sidebar for individual anchor points â a separate, parametric way to round the same kind of corner. When one or more straight corner anchor points are selected in vector edit mode (",(0,i.jsx)(n.code,{children:"Enter"}),"), the right sidebar shows a ",(0,i.jsx)(n.strong,{children:"Corner radius"})," field for the current selection:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Re-editable & Non-Destructive"}),": change the value at any time â re-tuning always recomputes from the corner's original sharp geometry, so edits never compound."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Zero-Reset"}),": setting the value back to ",(0,i.jsx)(n.code,{children:"0"})," restores the corner to its original sharp geometry, byte-identical to before any radius was ever applied."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Mixed States & Multi-Point"}),': selecting multiple corners with different radii shows a "Mixed" placeholder; typing a value applies it to every selected corner that can be rounded.']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Clamping & Eligibility"}),": a radius larger than a corner's adjacent segments allow is automatically clamped, and the applied value is shown back so the clamp is never silent. A curved corner shows the field disabled with a reason; selecting only open-path endpoints hides the field entirely."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Persistence & Undo"}),": radii are saved with the project (",(0,i.jsx)(n.code,{children:".fp"}),"), exported as SVG arcs, and one undo step reverts a radius change together with the corner geometry it produced."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-inspector-still.webp",alt:"Figpea Vector Inspector panel in vector edit mode displaying the Corner radius input property for a selected anchor point."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-retune-demo.webp",alt:"Demonstration of non-destructive Corner radius editing in Figpea: applying a radius, re-tuning the value, and resetting to 0 to restore sharp corner geometry."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-retune-demo-still.png",alt:"Still capture showing corner radius re-tuning and reset end state."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-clamp-feedback.webp",alt:"Typing a corner radius larger than the adjacent segments allow in Figpea: the value is automatically clamped and the applied value is shown back in the Corner radius field."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-clamp-feedback-still.png",alt:"Typing a corner radius larger than the adjacent segments allow in Figpea: the value is automatically clamped and the applied value is shown back in the Corner radius field."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/corner-radius-endpoint-hidden-still.png",alt:"An open path in Figpea's vector editor: selecting a corner shows the Corner radius field; selecting only an open endpoint does not."})}),"\n",(0,i.jsx)(n.h4,{id:"destructive-round-corners-toolbar",children:"Destructive Round Corners (Toolbar)"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Round Corners"})," toolbar operation described above and the ",(0,i.jsx)(n.strong,{children:"Corner radius"})," sidebar property above are two different tools for the same kind of corner, and it's worth being clear about which is which: the toolbar operation bakes an arc into the path and deletes the original anchor â the only way back is undo. The sidebar property is a value on the anch
1or itself, so you can select that corner again later and change or remove its radius without undoing anything."]}),"\n",(0,i.jsx)(n.h3,{id:"point-mirroring-options",children:"Point Mirroring Options"}),"\n",(0,i.jsxs)(n.p,{children:["Anchor points with b\xe9zier handles carry a stored ",(0,i.jsx)(n.strong,{children:"Mirroring"})," property that controls how opposite handles interact during a drag:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"No mirroring"}),": Handles move completely independently. Dragging one handle adjusts its angle and length without changing the opposite handle's position."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Mirror angle"}),": Handles maintain a collinear 180\xb0 line through the anchor point, but their lengths can be adjusted independently (asymmetric handles)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Mirror angle and length"}),": Handles maintain both an identical angle and equal length across the anchor point (symmetrical handles)."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Using Point Mirroring in the Inspector:"})}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Select one or more anchor points in vector edit mode."}),"\n",(0,i.jsxs)(n.li,{children:["In the Vector Inspector panel, locate the ",(0,i.jsx)(n.strong,{children:"Mirroring"})," dropdown."]}),"\n",(0,i.jsxs)(n.li,{children:["Choose ",(0,i.jsx)(n.strong,{children:"No mirroring"}),", ",(0,i.jsx)(n.strong,{children:"Mirror angle"}),", or ",(0,i.jsx)(n.strong,{children:"Mirror angle and length"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"Plain handle drags (with no modifier keys held) strictly obey the point's stored mirroring mode."}),"\n",(0,i.jsxs)(n.li,{children:["Point mirroring modes persist across project saves (",(0,i.jsx)(n.code,{children:".fp"}),") and reopens. Imported PSD, XD, ",(0,i.jsx)(n.code,{children:".fig"}),", and SVG vector paths automatically infer mirroring modes per point based on initial handle geometry."]}),"\n",(0,i.jsx)(n.li,{children:"When selecting multiple anchors with differing modes, the inspector displays a mixed state. Selecting a mode applies it to all selected points."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/point-mirroring-inspector-control-still.webp",alt:"Vector Inspector in Figpea showing Point Mirroring options (No mirroring, Mirror angle, Mirror angle and length) for selected anchor points."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/point-mirroring-mode-drag.webp",alt:"Animation showing adjusting point mirroring modes and dragging handles in Figpea's path editor"})}),"\n",(0,i.jsx)(n.h2,{id:"keyboard-shortcuts-and-modifiers",children:"Keyboard Shortcuts and Modifiers"}),"\n",(0,i.jsx)(n.p,{children:"Use these keyboard modifiers for precise control:"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Key"}),(0,i.jsx)(n.th,{children:"Function"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift + drag handle"})}),(0,i.jsx)(n.td,{children:"Move multi-selected b\xe9zier handles together in parallel direction (parallel handle translation)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Bend Tool"})}),(0,i.jsx)(n.td,{children:"Select Bend tool from secondary toolbar to drag path segments into curves or convert corner anchors to b\xe9zier handles"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift + B"})}),(0,i.jsx)(n.td,{children:"Activate Paint tool in vector edit mode to fill or unfill individual closed path regions."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Enter"})}),(0,i.jsx)(n.td,{children:"Enter vector edit mode on selected path/shape layers (converting non-paths to paths first)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Q"})}),(0,i.jsx)(n.td,{children:"Activate the Lasso tool for freeform anchor point selection in vector edit mode"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"C"})}),(0,i.jsx)(n.td,{children:"Activate the Cut tool in vector edit mode"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift + click on layer body"})}),(0,i.jsx)(n.td,{children:"Add a path layer to the active multi-layer vector edit session"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Cmd/Ctrl + click on layer body"})}),(0,i.jsx)(n.td,{children:"Switch active layer in vector edit session without exiting"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift"})}),(0,i.jsx)(n.td,{children:"When moving control points: Maintain symmetrical handles (mirrored â same angle & length)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Alt / Option"})}),(0,i.jsx)(n.td,{children:"When dragging a control handle: Move it independently, breaking symmetry (the opposite handle stays where it is)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift (with Lasso tool)"})}),(0,i.jsx)(n.td,{children:"Hold Shift while dragging with the Lasso tool to add points to the current anchor selection"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift + drag (selection rectangle)"})}),(0,i.jsx)(n.td,{children:"Add enclosed anchor points to the current anchor selection (same as Shift with the Lasso tool)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift (while scaling handles)"})}),(0,i.jsx)(n.td,{children:"Preserve aspect ratio (proportional scale) of selected anchor points"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Alt / Option (while scaling handles)"})}),(0,i.jsx)(n.td,{children:"Scale selected anchor points from the center of the selection bounding box"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Shift (while rotating corner)"})}),(0,i.jsx)(n.td,{children:"Snap rotation angle to 15\xb0 increments"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Space (during scale/rotate gesture)"})}),(0,i.jsx)(n.td,{children:"Hold Space mid-gesture to translate the selection, then release Space to resume transform"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Ctrl / Cmd"})}),(0,i.jsx)(n.td,{children:"When dragging a control handle: Constrain the handle movement to 45\xb0 increments"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Esc"})}),(0,i.jsxs)(n.td,{children:["With the ",(0,i.jsx)(n.strong,{children:"Add"}),", ",(0,i.jsx)(n.strong,{children:"Insert"}),", ",(0,i.jsx)(n.strong,{children:"Lasso"}),", or ",(0,i.jsx)(n.strong,{children:"Cut"})," tool active: cancel it and return to the Select tool. With the ",(0,i.jsx)(n.strong,{children:"Select"})," tool: clear the selected anchor points (first press), or leave path editing when nothing is selected (second press)."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Ctrl/Cmd + Enter"})}),(0,i.jsx)(n.td,{children:"Leave path editing straight away, whichever tool is active."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Double-click"})}),(0,i.jsx)(n.td,{children:"Toggle between smooth and corner points"})]})]})]}),"\n",(0,i.jsxs)(n.p,{children:["Leaving path editing is not an undo: whatever you changed stays changed. Use ",(0,i.jsx)(n.code,{children:"Ctrl/Cmd + Z"})," to undo an edit."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"/blog-images/docs-path-edit-widget/independent-handle-ctrl.webp",alt:"Editing an anchor point handle independently using the Alt / Option modifier in Figpea"})}),"\n",(0,i.jsx)(n.h2,{id:"snapping-features",children:"Snapping Features"}),"\n",(0,i.jsx)(n.p,{children:"The path editor includes intelligent snapping to help you create precise paths:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Point snapping"}),": Automatically snap to existing anchor points"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Alignment snapping"}),": Snap to horizontal or vertical alignments with other points"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Visual guides"}),": Green dotted lines appear when snapping is active"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"While using the Add or Insert tool, hold the Alt key to temporarily disable snapping. Alt does not bypass snapping during a handle drag."}),"\n",(0,i.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,i.jsx)(n.h3,{id:"creating-clean-paths",children:"Creating Clean Paths"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Start simple"}),": Begin with basic shapes and add detail gradually"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Use minimal points"}),": Fewer points create smoother, more efficient paths"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Leverage curves"}),": Use curves instead of many straight segments for smooth shapes"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Maintain symmetry"}),": Use Shift when adjusting control handles for symmetrical curves"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"editing-efficiently",children:"Editing Efficiently"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Choose the right tool"}
1),": Use Select for adjustments, Add for new segments, Insert for adding detail"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Use keyboard modifiers"}),": Shift, Alt, and Ctrl/Cmd provide precise control"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Utilize snapping"}),": Enable snapping for precise alignment with other elements"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Convert point types"}),": Use the Convert To feature to change how segments connect"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,i.jsx)(n.h3,{id:"common-issues",children:"Common Issues"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Points not selecting"}),": Make sure you're using the Select tool and clicking directly on the point"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Unexpected curve behavior"}),": Check control point positions and consider converting between point types"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Snapping not working"}),": Make sure you're not holding Alt while using the Add or Insert tool â Alt temporarily disables snapping only for those tools, not during a handle drag"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Path segments disappearing"}),": This can happen when deleting critical points; use Undo if needed"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"advanced-techniques",children:"Advanced Techniques"}),"\n",(0,i.jsx)(n.h3,{id:"creating-complex-shapes",children:"Creating Complex Shapes"}),"\n",(0,i.jsx)(n.p,{children:"For complex shapes:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Break the shape into multiple path segments"}),"\n",(0,i.jsx)(n.li,{children:"Use a combination of curves and straight lines"}),"\n",(0,i.jsx)(n.li,{children:"Leverage the Convert To feature to change segment types as needed"}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"precision-editing",children:"Precision Editing"}),"\n",(0,i.jsx)(n.p,{children:"For precise control:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Zoom in for detailed work on small areas"}),"\n",(0,i.jsx)(n.li,{children:"Use the Insert tool to add detail to specific areas"}),"\n",(0,i.jsx)(n.li,{children:"Leverage snapping to align with existing elements"}),"\n",(0,i.jsx)(n.li,{children:"Use keyboard modifiers for fine-tuned adjustments"}),"\n"]})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,i.jsx)(o,{...e,children:(0,i.jsx)(l,{...e})})}}},e=>{e.O(0,[1719,636,6593,8792],()=>e(e.s=3920)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.