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

# Shape Tools

> Create editable shapes with adjustable properties.

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 Procedural Shape

<img src="https://mintcdn.com/rive/Ft3_TIyFWFSLdOpR/images/editor/fundamentals/procedural-shapes-menu.png?fit=max&auto=format&n=Ft3_TIyFWFSLdOpR&q=85&s=7472ba4a4f10c7e2f9b153e0d47f07f5" alt="Procedural Shapes menu" width="1596" height="645" data-path="images/editor/fundamentals/procedural-shapes-menu.png" />

Procedural 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.
  </Step>
</Steps>

Hold `Shift` while dragging to constrain the shape's proportions.

<img src="https://mintcdn.com/rive/Ft3_TIyFWFSLdOpR/images/editor/fundamentals/procedural-shapes-create.gif?s=53a2cf4a6b91cf4a1413ba17df6b37a6" alt="Creating a procedural shape" width="1200" height="690" data-path="images/editor/fundamentals/procedural-shapes-create.gif" />

<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**: the corner radius for rectangles
* **Radius**: the radius value for polygons and stars
* **Points**: the number of points on polygons and stars

## Converting a Shape to a Custom Path

To edit individual vertices, convert the shape to a custom path.

<img src="https://mintcdn.com/rive/Ft3_TIyFWFSLdOpR/images/editor/fundamentals/procedural-shapes-convert.gif?s=89f1e611514fad03bc8e3a83f02ecd49" alt="Converting a procedural path to a custom path" width="1200" height="557" data-path="images/editor/fundamentals/procedural-shapes-convert.gif" />

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

<Note>
  Converting a procedural path to a custom 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 custom path, see [Edit Vertices](/editor/fundamentals/edit-vertices).
</Info>
