> ## Documentation Index
> Fetch the complete documentation index at: https://rive-advanced-topics.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Shape Tools

> Create editable shapes with adjustable properties.

export const VideoEmbed = ({src}) => {
  return <div style={{
    height: "100%"
  }}>
      <video src={src} autoPlay loop muted playsInline style={{
    width: "100%",
    height: "100%",
    borderRadius: 0,
    margin: 0,
    display: "block",
    objectFit: "cover",
    backgroundColor: "transparent"
  }} />
    </div>;
};

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

Shape tools let you create common shapes, such as rectangles, ellipses, polygons, and stars. These shapes keep editable properties, such as width, height, corner radius, and number of points, until you convert them to custom paths.

<YouTube id="vU5SrgymGD8" />

## Creating a Shape

Shape tools are available from the **Create Tools** menu.

<Steps>
  <Step>
    Open the **Create Tools** menu and select a shape tool.
  </Step>

  <Step>
    Click and drag inside an artboard to draw the shape.

    Hold `Shift` while dragging to constrain the shape's proportions.
  </Step>
</Steps>

<VideoEmbed src="https://static.rive.app/video/create-rectangle.mp4" />

<Info>
  See [Freeze and Origin](/editor/fundamentals/freeze-and-origin) to learn how to change the center point of a shape.
</Info>

## Shape Properties

You can update a shape's properties in the inspector. Available properties depend on the selected shape type.

* **Size**: The width and height of the shape.
* **Origin**: The [origin](/editor/fundamentals/freeze-and-origin) point of the shape.
* [Corner](#corner): The corner radius of rectangles.
* [Radius](#radius): The radius of polygons and stars.
* [Points](#points): The number of points on polygons and stars.
* [Angle](#angle): The angle between the outer and inner points of a star.

### Corner

Adjust the corner radius by dragging the circular handles on each corner of the rectangle.

Hold `Alt` (Windows) or `Option` (macOS) while dragging to adjust a single corner independently.

<img src="https://mintcdn.com/rive-advanced-topics/eJvnNDd5OACRAz20/images/editor/drawing/corner-radius-handles.gif?s=ba1baa409a6c5f6f2dad863945eb61c4" alt="Adjusting rectangle corner radius handles" width="550" height="390" data-path="images/editor/drawing/corner-radius-handles.gif" />

### Radius

Drag the radius handle to adjust the radius of all points on the shape at once.

<img src="https://mintcdn.com/rive-advanced-topics/eJvnNDd5OACRAz20/images/editor/drawing/radius-handle.gif?s=d4e45f077a2bbad7ed6c01b5cfda3323" alt="Adjusting the radius of the corners of a rectangle" width="550" height="390" data-path="images/editor/drawing/radius-handle.gif" />

### Points

Control the number of points by dragging the points handle up or down.

<img src="https://mintcdn.com/rive-advanced-topics/eJvnNDd5OACRAz20/images/editor/drawing/points-handle.gif?s=ebd331cb1ca35578289044aa795a280e" alt="Dragging to adjust the number of points on a shape" width="550" height="390" data-path="images/editor/drawing/points-handle.gif" />

### Angle

Drag the handle on the inner point up or down to adjust the angle on the inner and outer points of a star.

<img src="https://mintcdn.com/rive-advanced-topics/eJvnNDd5OACRAz20/images/editor/drawing/star-angle.gif?s=07a9f5fa9f627b3e69d1d98aab7adfd2" alt="Adjusting the angle of the inner points of a star" width="550" height="390" data-path="images/editor/drawing/star-angle.gif" />

## Converting a Shape to a Custom Path

Press `Enter` to convert the selected shape to a path. After conversion, you can edit each vertex directly.

<VideoEmbed src="https://static.rive.app/video/convert-to-path.mp4" />

<Note>
  Converting a shape to a path removes its procedural properties, such as width, height, corner radius, and number of points. Any animations applied to those properties are also removed.
</Note>

<Info>
  To edit a path, see [Edit Vertices](/editor/fundamentals/edit-vertices).
</Info>