Ellipse

Overview

Ellipse shapes expand to fill the space offered to them by their parent. Unlike the Circle shape, the Ellipse does not maintain a perfectly circular form.

For example, when you insert an Ellipse into a component, the shape automatically fills all of the space available in the component.

Pro Tip
Press "o" on your keyboard to insert an Ellipse.

You can use modifiers such as Frame or Aspect Ratio to give the Ellipse a new parent to fill.

If the space a parent offers is a perfect square, the Ellipse may appear to be identical to a Circle. However, as soon as the space being offered by the parent is no longer a perfect square, the Ellipse will extend edge to edge in all directions and become more of an oval shape.

<div class="callout note">Note
An Ellipse needs a defined space to fill. If you add the shape directly to the canvas without a Frame, it defaults to 10x10.</div>

Editing Ellipses

Ellipses come with a Style and Color property that you can adjust.

The Style Property

The Style property determines whether an Ellipse is drawn as a Fill or as a Stroke (border). By default, an Ellipse’s style is set to Fill, but it can be changed to Stroke or Stroke Border from the drop-down.

A Stroke is drawn centered over the path of the Ellipse while a Stroke Border is drawn inside the path of the shape.

The Line Width Property

When you select Stroke or Stroke Border, you can control the width of the stroke with the Line Width property.

The Color Property

The Color property defines the color of an Ellipse’s Fill or Stroke, depending on the Style chosen.