Shapes

Shapes cover everything from a simple divider line to hand-drawn curves: scrims behind text, badges, arrows pointing at the important thing, decorative accents. They are SVG under the hood, so they stay crisp at any size.

#Adding a Shape

Select a block and click "Add Shape". The gallery offers:

• Preset shapes - squares, circles, ellipses, polygons, triangles, chevrons, arrows, stars, speech bubbles, badges, hearts, pins, and more. Click one and drag on the canvas to draw it at the size you want.
• Drawing tools - "Line", "Arrow", and "Bezier", each also in dashed and dotted variants.
• "Custom" - upload your own SVG file.

With a block selected, the most common shapes also have shortcuts that jump straight into draw mode: R for a rectangle, O for an oval, L for a line, and V for a bezier curve.

#Drawing Lines and Curves

Lines and arrows are drawn with a single drag, start to end.

Bezier curves are point-based: click on the canvas to place points, and PaneFlow connects them with a smooth curve as you go. Click "Done" or press ESC to finish. Afterwards you can fine-tune the result - drag anchor points to reposition them, and drag the control handles to adjust how the curve bends through each point.

#Fill and Stroke

In "Fill & Border":

• "Fill Color" - solid or gradient. Lines, arrows, and bezier curves have no fill; they are stroke-only.
• "Border Color" and "Border Width" style the stroke. On filled shapes the border outlines the shape; on lines and curves it is the line itself, so width is its thickness.

A shape always keeps its own proportions: it scales to fit inside its frame, centered, rather than stretching to fill it.

#The Draw Animation

Shapes have an exclusive animation type: Draw traces the stroke from nothing to its full length when the pane becomes active - great for underlines, connector lines, and circled highlights.

Draw animates the stroke only, so the shape must have a visible border ("Border Width" above 0). A fill-only shape will not draw. It works on every shape, but reads best on lines, arrows, and bezier curves.

#Next

• Element Animations - draw and everything else
• Elements Overview - shared controls and sizing
• Charts - when the line should mean something