Shape
How to add a shape
There are three drawing tools available to use when drawing shapes: the Pen tool (shortcut P), the Rectangle tool (R), and the Ellipse tool (E).
Draw a shape by selecting the tool, clicking the canvas, and dragging your mouse over the canvas while holding down the mouse button.
Shape properties
Use Fill to set the shape's fill color. For drawing the path line itself, use the Stroke option. As a default, both the cap and the join style are set to "Round".
In addition to the Width, you can also select the length of the stroke, with Start and End being the points at which the stroke starts and ends relative to the overall path length. You can offset these points with Offset.
View all properties that aren't specific to shape elements on the element properties page.
Create a rounded shape
Set a border radius to round off the corners of a shape. This doesn't work for Bézier points, so you must first convert them to straight points by double-clicking them while in shape editing mode.
How to animate a shape path
It is possible to animate the shape by adding keyframes, as shown below.
Unboxed vs. boxed shapes
Shapes can be defined in two ways:
- Unboxed shapes are composed of absolute points. Its dimensions are determined by the bounds of all its points. Shapes drawn with the Pen tool are unboxed shapes by default.
- In boxed shapes, points are defined as percentages of the bounding box. As the bounding box has fixed dimensions, it is easier to animate and make responsive. Shapes drawn with the Rectangle or Ellipse tool are boxed by default.
Boxed shapes are best for responsive templates. You can maintain the shape's width and height ratio by using the Aspect Ratio property.