The Ellipse tool creates circles, ovals, arcs, and pie shapes. Use it for avatars, buttons, icons, progress indicators, and decorative elements.
Creating Ellipses
Activate the Ellipse tool
Press O or select the ellipse icon from the shape tools.
Click and drag
Click on the canvas and drag to create an ellipse. The shape is defined by a bounding rectangle.
Release to finish
Release the mouse button to complete the shape.
Drawing Modifiers
| Modifier | Effect |
|---|---|
Shift |
Constrain to perfect circle |
Alt/Option |
Draw from center instead of corner |
Shift + Alt |
Draw circle from center |
For perfect circles, hold Shift while dragging, or enter equal width and height values
in the Properties Panel.
Arc & Pie Shapes
Ellipses can be turned into arcs (partial circles) and pie shapes using the arc controls.
Creating Arcs
- Select an ellipse
- In the Properties Panel, find the Arc section
- Adjust the Start angle (0-360°)
- Adjust the Sweep angle (how much of the circle to show)
Arc vs. Pie
- Arc - Just the curved edge, no fill to center
- Pie - Includes lines from the center, like a pie slice
Toggle between Arc and Pie mode using the switch in the Properties Panel.
Visual Arc Controls (Figma-Style)
When an ellipse is selected, three interactive handles appear for precise arc control:
1. Sweep Handle (Orange)
Controls the arc extent (0-360°):
- Drag around the circle's edge to adjust how much of the circle is shown
- Displays real-time tooltip showing sweep angle as you drag
- Full circle at 360°, semi-circle at 180°, quarter-circle at 90°
2. Start Handle (Blue Dot)
Rotates where the arc begins:
- Distinguished by a blue dot indicator at the center
- Drag to rotate the starting point of the arc around the circle
- Tooltip shows the start angle in degrees (0° is right, 90° is bottom)
- Useful for positioning pie slices and progress indicators
3. Ratio Handle (Inner)
Creates rings and donut shapes:
- Appears as a handle that can be dragged inward
- Adjusts inner radius from 0% (solid) to 100% (hollow ring)
- Tooltip displays ratio percentage as you drag
- Perfect for creating progress rings and circular badges
- Works with both full circles and arcs
Visual Feedback
- Real-time updates - See changes instantly as you drag
- Tooltips - Show exact angle/ratio values during manipulation
- Ring rendering - Uses evenOdd path fill type for clean rings
- Works on ellipses - All three handles work on both circles and ellipses
Double-click an arc handle to reset the ellipse to a full circle. This is faster than manually entering 360° sweep.
Ellipse Properties
Position & Size
- X, Y - Position of the bounding box
- W, H - Width and height (equal for circles)
- Rotation - Angle in degrees
Arc Settings
- Start - Beginning angle (0° is right, 90° is bottom)
- Sweep - Arc length in degrees
- Ratio - Sweep as a percentage (0-100%)
- Inner Radius - Creates a donut/ring shape (0-100%)
Fill & Stroke
Same options as rectangles: solid colors, gradients, images, and stroke styles.
Creating Ring/Donut Shapes
Combine the inner radius with arc settings to create rings and progress indicators:
- Create an ellipse
- Set Inner Radius to a value like 70-80%
- Optionally adjust arc angles for partial rings
This creates a hollow circle perfect for progress rings, badges, and decorative elements.
Common Use Cases
Avatars
Create a circle, add an image fill, and use as a profile picture placeholder.
Progress Indicators
Use ring shapes with arcs to show progress. Animate the sweep angle to show loading.
Pie Charts
Create multiple pie shapes with different colors and angles to visualize data.
Decorative Elements
Circles and ellipses work great for abstract decorations, blob shapes, and backgrounds.
Converting to Path
Convert an ellipse to an editable path for custom modifications:
- Select the ellipse
- Choose Object → Convert to Path (
⌘/Ctrl + Shift + O) - The ellipse becomes 4 anchor points with bezier handles
After conversion, arc and inner radius controls are no longer available, but you gain full point-editing capabilities.