Geometry shapes

A geometry shape is a vector shape defined by its box:

• Use it for basic figures (boxes, circles, arcs, triangles, rhombuses) when an exact, regular outline matters more than drawing by hand.
• Kinds: Rectangle, Ellipse, Triangle, or Rhombus, and it can switch kind at any time.
• Options: an ellipse can become an arc or a sector, and a rectangle can round its corners.
• Label: it can carry a text label inside it.
• Reshaping: to edit its outline point by point, convert it to a path.

Creating a geometry shape

Both ways start by picking the kind and leave the selection tool active again when you finish.

Creating a shape at the default size

A shape placed with one click, at the standard size.

• Operation:
  1. Pick Rectangle, Ellipse, Triangle, or Rhombus in the shapes multi-button of the Tools panel.
  2. Click where the shape should go.
• Result: a shape of the default size, centered on the point you clicked, with its pivot at its center.
• Tip: Geometry in the Selection info section switches it to any of the four kinds later.

Creating a shape at a custom size

A shape sized by hand from the start.

• Operation:
  1. Pick Rectangle, Ellipse, Triangle, or Rhombus in the shapes multi-button of the Tools panel.
  2. Drag on the board to draw its box.
• Result: a shape filling the box you dragged, with its pivot at its center.
• Tip: the size can be changed later with the handles. See Sizing.

Labels

Puts a text inside the shape that moves with it.

• Operation: double-click the shape and type. Click on empty board to finish.
• Result: a text label centered in the shape, styled by the text sections of the Attributes. An empty label is removed when you finish.
• Tip: in a label, type an expression and then = to write its result after it. See Math expressions.

Sizing

• Any handle resizes the box, and the outline follows it. See Resize for resizing from the center or keeping proportions.

Attributes

A selected geometry shape shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole. The section is titled after the kind: Rectangle, Ellipse, Triangle, or Rhombus.

• 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.
• Corners radius: rounds the corners of the shape.
• 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.
• Geometry: switches between rectangle, ellipse, rhombus, and triangle.
• Sweep angle: for ellipses, how much of the full circle the arc covers, from 1 to 360 degrees, turning the shape into an arc or a sector.
• Sweep start angle: for ellipses, where the arc begins. Shown while the sweep angle is below 360.

Corners radius rounds the corners of a rectangle.

Stroke

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

Fill

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

Text Style

The typeface, size, and placement of the label.

Font style and family

• Font style: the family of typefaces to choose from.
  • Sans Serif: plain letterforms without finishing strokes.
  • Serif: letterforms with finishing strokes, as in print.
  • Handwriting: letterforms that look written by hand.
  • Mono: every character takes the same width, as in code.
  • Display: decorative typefaces for titles.
• Font family: the typeface, within the chosen style.

Font variant

• Font variant: the weight or slant of that typeface.

Font size

• Font size: the size of the text.

Letter spacing

• Letter spacing: for text on a path, the extra space between characters along the path.
• Line height: the space between lines.
• Horizontal alignment: where the lines sit across the box.
  • Align left
  • Align center
  • Align right
• Vertical alignment: where the text block sits down the box.
  • Align top
  • Align middle
  • Align bottom

Text Fill

The color of the label's letters and its opacity.

• Text fill style: whether the characters are filled. The style decides which of the controls below appear.
  • No fill: the characters are hollow.
  • Solid fill: the characters are filled with one flat color.

Text fill color

Shown with solid text fill.

• Text fill color: the color of the characters.

Text fill opacity

Shown with solid text fill.

• Text fill opacity: the transparency of that color.

Text Outline

The outline drawn around the label's letters.

• Text stroke style: whether the characters have an outline. The style decides which of the controls below appear.
  • No stroke: no outline.
  • Solid stroke: a continuous outline.
• For solid strokes only:
  • Text stroke color: the color of the outline.
  • Text stroke opacity: the transparency of the outline.
  • Text stroke width: the thickness of the outline.
  • Over Fill: draws the outline over the fill instead of behind it, so it covers part of each character. Texts, arrows, and geometry shapes have it, while the text has a fill.

Filter

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

Mask

A geometry shape 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 geometry shape offers these in the Actions panel.

Boolean operations

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

Convert to path shape

Turns the outline into a path you can reshape point by point.

• Operation: click Convert to path shape.
• Result: a closed path with the same outline, ready for point editing. Its label, if any, becomes a separate text shape.

Convert to freehand shape

Turns the outline into a freehand shape made of points.

• Operation: click Convert to freehand shape.
• Result: a freehand shape with the outline sampled into points. Its label, if any, becomes a separate text shape.

Open image editor

Turns the fill of the shape 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 shape with an image that looks the same but draws faster, to keep a board with many shapes light. The shape can no longer be edited.

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

Download source asset

Saves the current file of the shape'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 geometry shapes

Stroke Animation draws the outline over time, with speed, direction, and an optional image following the tip. Text Animation reveals the label as if typed.