# Shape Tools
Lottie Creator provides four shape tools for quickly creating geometric shapes: Rectangle, Ellipse, Polygon, and Star. These tools create vector shapes that can be animated, styled, and modified.

<Image src="https://assets.docs.lottiefiles.com/static/0a9dec152f-640.webp" alt="Shape Tools" caption="Shape Tools" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/0a9dec152f-640.webp 640w, https://assets.docs.lottiefiles.com/static/0a9dec152f-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/0a9dec152f-1920.webp 1920w" width="2348" height="1320" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAACXBIWXMAACxLAAAsSwGlPZapAAAAgklEQVR4nCXNTwuCMByH8b2PoA6FHaSk2xC9qP1xv60JwsZSqMYSunTvxes3sPvD52HKhalub8gqQi5aZKcr8rNGelTgJY1MuwDVvbAXBlFywHITYbWNkVYSvBBg0jxQ3z/gwxfxLsFi/Q90N6Dp32Bk/SRdwMX6meclzQuyHsI8xx/kdTq1m+ma1AAAAABJRU5ErkJggg==" />

1. **Rectangle Tool** (Alt+R) - Create squares and rectangles with optional rounded corners
2. **Ellipse Tool** (Alt+O) - Create circles and ellipses
3. **Polygon Tool** - Create regular polygons with customizable point count
4. **Star Tool** - Create stars with adjustable points and inner radius

## 1. Rectangle Tool

Create rectangles and squares with optional rounded corners.

### Activating Rectangle Tool

<List type="bullet">
  <ListItem>Press **Alt+R** (or **Option+R** on Mac)</ListItem>
  <ListItem>Click the **rectangle icon** in left sidebar</ListItem>
  <ListItem>Or select from tool menu</ListItem>
</List>

### Creating Rectangles

**Basic Rectangle:**

1. Select Rectangle Tool
2. Click and drag on canvas
3. Release to create rectangle

**Perfect Square:**

<List type="bullet">
  <ListItem>Hold **Shift** while dragging</ListItem>
  <ListItem>Creates 1:1 aspect ratio</ListItem>
  <ListItem>Size determined by drag distance</ListItem>
</List>

**Fit to Scene:**

<List type="bullet">
  <ListItem>Hold **Option/Alt** and **click** (without dragging) to draw a shape fitted to the scene</ListItem>
</List>

**Combined Modifiers:**

<List type="bullet">
  <ListItem>**Shift + Alt** - Perfect square from center</ListItem>
</List>

### Rectangle Properties

After creating a rectangle, adjust properties in the right sidebar:

**Size:**

<List type="bullet">
  <ListItem>**Width** - Horizontal dimension (px)</ListItem>
  <ListItem>**Height** - Vertical dimension (px)</ListItem>
  <ListItem>Link icon to maintain aspect ratio</ListItem>
</List>

**Corner Radius:**

<List type="bullet">
  <ListItem>**Roundness** - Radius of rounded corners (0 = sharp corners)</ListItem>
  <ListItem>Set all corners together or individually</ListItem>
  <ListItem>Maximum roundness creates pill/capsule shape</ListItem>
  <ListItem>Animatable property</ListItem>
</List>

**Position & Transform:**

<List type="bullet">
  <ListItem>Position, scale, rotation (see Transform Properties)</ListItem>
  <ListItem>All standard transform controls available</ListItem>
</List>

**Appearance:**

<List type="bullet">
  <ListItem>Fill color (solid or gradient)</ListItem>
  <ListItem>Stroke (outline with width, color, opacity, dashes)</ListItem>
</List>

## 2. Ellipse Tool

Create circles and ellipses for organic shapes.

### Activating Ellipse Tool

<List type="bullet">
  <ListItem>Press **Alt+O** (or **Option+O** on Mac)</ListItem>
  <ListItem>Click the **ellipse/circle icon** in left sidebar</ListItem>
  <ListItem>Or select from tool menu</ListItem>
</List>

### Creating Ellipses

**Basic Ellipse:**

1. Select Ellipse Tool
2. Click and drag on canvas
3. Release to create ellipse

**Perfect Circle:**

<List type="bullet">
  <ListItem>Hold **Shift** while dragging</ListItem>
  <ListItem>Creates equal width and height</ListItem>
  <ListItem>Size determined by drag distance</ListItem>
</List>

### Ellipse Properties

**Size:**

<List type="bullet">
  <ListItem>**Width** - Horizontal diameter (px)</ListItem>
  <ListItem>**Height** - Vertical diameter (px)</ListItem>
  <ListItem>Link icon to maintain circular shape</ListItem>
</List>

**Position & Transform:**

<List type="bullet">
  <ListItem>Position, scale, rotation</ListItem>
  <ListItem>Rotation affects gradient direction if applied</ListItem>
</List>

**Appearance:**

<List type="bullet">
  <ListItem>Fill color (solid or gradient)</ListItem>
  <ListItem>Stroke (outline)</ListItem>
  <ListItem>All standard appearance properties</ListItem>
</List>

## 3. Polygon Tool

Create regular polygons with any number of sides.

### Activating Polygon Tool

<List type="bullet">
  <ListItem>Click the **polygon icon** in left sidebar</ListItem>
  <ListItem>Or select from tool menu</ListItem>
  <ListItem>No default keyboard shortcut (can assign in preferences)</ListItem>
</List>

### Creating Polygons

**Basic Polygon:**

1. Select Polygon Tool
2. Click and drag on canvas
3. Release to create polygon

**Regular Shape:**

<List type="bullet">
  <ListItem>Polygons are always regular (equal sides and angles)</ListItem>
  <ListItem>Drag distance determines size</ListItem>
  <ListItem>Hold **Shift** to constrain orientation</ListItem>
</List>

### Polygon Properties

**Points:**

<List type="bullet">
  <ListItem>**Point Count** - Number of sides (3 to 100+)</ListItem>
  <ListItem>3 = Triangle</ListItem>
  <ListItem>4 = Diamond</ListItem>
  <ListItem>5 = Pentagon</ListItem>
  <ListItem>6 = Hexagon</ListItem>
  <ListItem>8 = Octagon</ListItem>
  <ListItem>And so on...</ListItem>
</List>

**Size:**

<List type="bullet">
  <ListItem>**Outer Radius** - Distance from center to points</ListItem>
  <ListItem>**Inner Radius** - Not applicable for regular polygons</ListItem>
</List>

**Rotation:**

<List type="bullet">
  <ListItem>Rotate to change orientation</ListItem>
  <ListItem>Points can face up, down, or any direction</ListItem>
</List>

**Appearance:**

<List type="bullet">
  <ListItem>Fill and stroke like other shapes</ListItem>
  <ListItem>All appearance properties available</ListItem>
</List>

## 4. Star Tool

Create stars with customizable points and inner radius.

### Activating Star Tool

<List type="bullet">
  <ListItem>Click the **star icon** in left sidebar</ListItem>
  <ListItem>Or select from tool menu</ListItem>
  <ListItem>No default keyboard shortcut (can assign in preferences)</ListItem>
</List>

### Creating Stars

**Basic Star:**

1. Select Star Tool
2. Click and drag on canvas
3. Release to create star

**Constrained Star:**

<List type="bullet">
  <ListItem>Hold **Shift** while dragging</ListItem>
  <ListItem>One point faces directly up</ListItem>
  <ListItem>Useful for consistent orientation</ListItem>
</List>

### Star Properties

**Points:**

<List type="bullet">
  <ListItem>**Point Count** - Number of points (3 to 100+)</ListItem>
</List>

**Radii:**

<List type="bullet">
  <ListItem>**Outer Radius** - Distance to outer points</ListItem>
  <ListItem>**Inner Radius** - Distance to inner points (between outer points)</ListItem>

  <ListItem>
    **Ratio** - Inner/outer radius ratio

    <List type="bullet">
      <ListItem>Small ratio = sharp, thin points</ListItem>
      <ListItem>Large ratio = blunt, thick points</ListItem>
    </List>
  </ListItem>
</List>

**Rotation:**

<List type="bullet">
  <ListItem>Rotate to change orientation</ListItem>
  <ListItem>Typically one point faces up</ListItem>
</List>

**Appearance:**

<List type="bullet">
  <ListItem>Fill and stroke properties</ListItem>
  <ListItem>Gradients work well with stars</ListItem>
  <ListItem>All appearance options available</ListItem>
</List>

## Common Shape Tool Features

### Default Appearance

All new shapes start with:

<List type="bullet">
  <ListItem>**Fill:** Default color (from last used or theme)</ListItem>
  <ListItem>**Stroke:** Usually none (can be enabled)</ListItem>
  <ListItem>**Opacity:** 100%</ListItem>
</List>

Customize in property panel after creation.

### Editing After Creation

**Resize:**

<List type="bullet">
  <ListItem>Use Selection Tool (V)</ListItem>
  <ListItem>Drag corner handles</ListItem>
  <ListItem>Shift+drag for proportional scaling</ListItem>
</List>

**Reposition:**

<List type="bullet">
  <ListItem>Drag with Selection Tool</ListItem>
  <ListItem>Or use Position property in panel</ListItem>
</List>

**Modify Properties:**

<List type="bullet">
  <ListItem>Adjust specific shape properties (corner radius, points, etc.)</ListItem>
  <ListItem>Change appearance (fill, stroke)</ListItem>
  <ListItem>All editable in property panel</ListItem>
</List>

## Converting Between Shapes

**Path Conversion:**
Shapes can be converted to editable paths:

1. Select shape
2. Right-click → **Convert to Path** or click on "Convert to Path" in the property panelConvert to Path" in the property panel
3. Shape becomes bezier path
4. Edit with Pen Tool or Path Editing Tool

<Image src="https://assets.docs.lottiefiles.com/static/22da2f978d-640.webp" alt="Convert to Path" caption="Convert to Path" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/22da2f978d-640.webp 640w, https://assets.docs.lottiefiles.com/static/22da2f978d-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/22da2f978d-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAjElEQVR4nEXNzQqCQABFYV+ihdGPZThgFhFRrSwMhHHUQAtNW1n6/ltXJ2Zju7v4ONdIXl/C7M35FnEKIo6BJMxqkqpFlU1vpHWHL3MmjotpC0bzJb7MuNcdcfnBSKuWa/xk4e2xNwemwhuAKhoNOi7qgeXusNwt45XAj/J/QQ99ofMzsca0nQGooul/JHFHp1AuX40AAAAASUVORK5CYII=" />

**Note:** Converting to path loses parametric properties (can't adjust corner radius, point count, etc. after conversion).

## Animating Shapes

### Animatable Properties

**All Shapes:**

<List type="bullet">
  <ListItem>Position, Scale, Rotation, Opacity</ListItem>
  <ListItem>Fill color, Stroke color</ListItem>
  <ListItem>Stroke width</ListItem>
</List>

**Rectangle Specific:**

<List type="bullet">
  <ListItem>Corner radius (animate rounding)</ListItem>
  <ListItem>Width, Height (separately)</ListItem>
</List>

**Polygon/Star Specific:**

<List type="bullet">
  <ListItem>Point count (smooth morphing between shapes)</ListItem>
  <ListItem>Outer radius, Inner radius (stars)</ListItem>
</List>

## Keyboard Shortcuts

Shape tool shortcuts:

**Tools:**

<List type="bullet">
  <ListItem>**Alt+R** (Option+R) - Rectangle Tool</ListItem>
  <ListItem>**Alt+O** (Option+O) - Ellipse Tool</ListItem>
</List>

**Modifiers:**

<List type="bullet">
  <ListItem>**Shift + Drag** - Constrain proportions</ListItem>
  <ListItem>**Alt/Option + Drag** - Draw from center</ListItem>
  <ListItem>**Alt/Option + Click** - Draw a shape fitted to the scene</ListItem>
  <ListItem>**Shift + Alt + Drag** - Both modifiers</ListItem>
</List>

**After Creation:**

<List type="bullet">
  <ListItem>**V** - Switch to Selection Tool</ListItem>
  <ListItem>**Enter** - Edit shape properties</ListItem>
  <ListItem>**Delete** - Remove shape</ListItem>
</List>