Paths

A path is the most precise vector shape:

• Use it when you need control over the curvature. Every curve has two control points you can drag, so a bend can be shaped exactly and corrected later.
• Drawing: with the Pen, one point at a time, with a straight segment or a curve between each pair of points.
• Subpaths: it's the only vector shape that can hold several subpaths in one shape, which is what boolean operations produce.
• Curves for other shapes: the other vector shapes convert to a path when they need curves.

Drawing a path

A path placed point by point with the pen.

• Operation:
  1. Pick Pen in the paths multi-button of the Tools panel.
  2. Click to add a corner, or drag to add a curve and shape it while dragging.
  3. Finish the path:
     • Double-click on empty board to leave it open.
     • Double-click a point to close it there.
• Result: a path made of segments and curves, with a control point handle on each curve.
• Tip: while drawing, dragging an existing handle moves it, so a curve can be corrected before finishing.

Options while drawing

While the pen is active, the Actions panel shows one state button:

• Arrow mode: the drawing becomes an arrow that follows the line you drew.

Editing

Editing a path means moving its points and shaping its curves through their control points. In edit mode, every point and every control point becomes a handle you can drag.

Entering edit mode

• Operation:
  • If the shape is selected, click Enter edit mode in the Actions panel.
  • If the shape is not selected, double-click it.
• Result: the shape shows a handle on every point and a handle on each control point of a curve. The resize handles disappear while editing.

Moving points

• Operation: drag a handle to reshape the path.
  • To move several points at once, click their handles to select them, then drag one.
• Result: the segments attached to the points follow.

Placing points precisely

Keeping the knot angle

Adding a point

Puts a new point on an existing segment.

• Operation: double-click the outline where the new point should go.
• Result: a point is added on that segment. Drag it to reshape.

Removing points

• Operation: double-click a point.
  • To remove several points at once, select them and click Delete selection.
• Result: the points are removed and the outline closes over the gap.

Aligning points

• Operation: select two or more points and click one of the align buttons:
  • Align points to the left
  • Align points to the right
  • Align points to the top
  • Align points to the bottom
  • Center points horizontally
  • Center points vertically
• Result: the selected points line up on the chosen edge or center.

Smooth and sharp curves

With the points where curves meet selected, these commands change the curves.

Converting a knot to smooth

Converting a knot to hard

Smoothing control points

Closing and opening

• Operation: turn Closed stroke on or off in the Stroke section.
• Result: closed, the last point joins the first; open, the shape ends at its last point.

Leaving edit mode

• Operation: click on empty board, or click Exit edit mode, to finish.

Attributes

A selected path shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole. The section is titled Path.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Locked Ratio: keeps the proportion between width and height while resizing.
• Proportional: scales the stroke width, dashes, hatching, and tiles along with the shape, so a resized shape keeps its look.

Stroke

The line the path is drawn with. Every stroke control is described in Vector styles.

Fill

How the inside of the path is painted. Every fill control is described in Vector styles.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

A path can be masked and can be used as a mask. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, a path offers these in the Actions panel. The conversions are available outside edit mode.

Boolean operations

Union, subtract, intersect, exclude, flatten, and split build new paths from the selection. See Boolean operations.

Convert to freehand shape

Turns the path into a freehand shape made of points.

• Operation: click Convert to freehand shape.
• Needs: a path with a single subpath, since one freehand shape holds a single line.
• Result: a freehand shape with the path sampled into points. Curves keep their look but lose their control points.

Convert to arrow

Turns an open path into an arrow that follows it.

• Operation: click Convert to arrow.
• Needs: an open path. A closed one is left unchanged and a notice says so.
• Result: a custom arrow with the path as its route, no start arrowhead and an arrow end. If an end lands on a shape, the arrow connects to it right away. The arrow replaces the path.

Open image editor

Turns the fill of the path into pixels and opens it for painting.

• Operation: click Open image editor.
• Result: the current fill, hatches and gradients included, becomes a picture at the Image editor fill resolution multiplier set in the App settings, and the image editor opens on it. The picture stays as the fill afterwards.

Convert to Image

Replaces the path with an image that looks the same but draws faster, to keep a board with many shapes light. The path can no longer be edited.

• Operation: click Convert to Image. If the path has a Stroke Animation, a dialog warns that it will be lost, and you confirm with Convert.
• Result: an SVG image in place of the path that looks the same and stays sharp at any zoom. Move, rotate, scale, resize, and fade animations move to the image, and the stroke animation is removed.

Download source asset

Saves the current file of the path's image fill to your device.

• Operation: click Download source asset.
• Needs: a shape whose fill is an image.
• Result: the file the shape uses downloads. With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are; shapes without a file are skipped.

Animating paths

Stroke Animation draws the path over time, with speed, direction, and an optional image following the tip.