> ## 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.
# Meshes
> Add natural, organic deformations to raster graphics.
Meshes let you deform raster images and [components](https://rive.app/docs/editor/fundamentals/components.md#deform) by moving vertices instead of transforming the image as a flat rectangle. They are useful for natural motion, such as skin flexing, fabric rippling, hair flowing, or creating faux 3D effects.
A mesh is built from a [contour](#contours), which defines the mesh’s shape and vertices. Rive uses that contour to create a triangulated surface over the image.
## Adding a Mesh to an element
Meshes can be applied to images, as well as instances of components with their **Mode** set to **Node**
### Images
**Step 1**
Select an image on the Stage or Hierarchy and press **Enter** or go to the **Deform** section in the Inspector.
**Step 2**
Click the **+** button and select **Mesh**.
### Components
You can also add a mesh to a [component](https://rive.app/docs/editor/fundamentals/components.md#deform) instance with **Mode** set to **Node**. The component draws its artboard as a flat image and the mesh deforms that image, so you can bind it to bones and animate its vertices like any other mesh.
**Step 1**
Select the component instance and set **Mode** to **Node**.
**Step 2**
In the **Deform** section of the Inspector, click **+** and select **Mesh**.
## Deforming a Mesh
Enter Mesh Editing Mode by pressing `V` or by deselecting **Edit Contour**.
In mesh editing mode, moving a vertex changes the shape of any triangles connected to that vertex and deforms the pixels inside those triangles. Pixels in triangles that are not connected to the moved vertex are not affected.
Here’s a simple mesh with four vertices divided into two triangles:
Here’s a slightly more complex mesh with a center vertex, dividing the image into four triangles:
The position of these vertices can be keyed on a timeline or [controlled by bones](https://rive.app/docs/editor/manipulating-shapes/bones.md).
## Contours
The contour defines the visible shape and vertex structure of the mesh. Editing the contour changes the mesh structure without deforming the image.
### Creating contours
When you add a mesh to an image, Rive automatically creates a simple contour with four vertices that make two triangles. You can use this contour as a starting point or make your own.
#### Manually create a new contour
Click the **New Contour** button to draw a new contour from scratch.
This is useful when the default contour does not match the shape of the image, or when you want full control over the mesh structure.
#### Auto-trace a new contour
Use **Auto-Trace** to quickly create a contour that follows the visible shape of an image.
Adjust the settings to control the generated contour:
* **Detail** - how closely the contour follows small details in the image.
* **Concavity** - how deeply the contour follows inward curves.
* **Uniform** - how evenly vertices are spaced along the contour.
* **Alpha** - the transparency threshold used to detect the image edge.
* **Padding** - extra space added around the traced outline.
#### Contour bounds
Only the area inside the contour is rendered. Anything outside the contour is hidden.
This can be useful when you want to create multiple meshes from different parts of the same image.
### Editing contours
Use **Edit Contour** or press **P** to adjust the existing contour. The Mesh Pen lets you add new vertices or move existing vertices without warping the image.
Click continuously to create forced edges between vertices. Press **Esc** between clicks to create separate vertices and let Rive automatically generate the edges between them.
#### Forced edges
Forced edges are edges you manually add between mesh vertices. Use forced edges when you need more control over the mesh structure, such as defining an important seam, crease, corner, or area where the mesh triangles should follow a specific path.
When using the Mesh Pen, click continuously to create connected vertices with forced edges.
Tip
**Example - Rigging a Snake**
In this example, the default edges made the snake stretch in an unexpected way, creating a bump in its skin. By adding a forced edge, the edges run perpendicular to the body, helping the snake deform more naturally.
Forced edges are shown as thicker lines in the mesh.
To remove a forced edge, select **Edit Contour**, then **Cmd-click** the edge on macOS or **Ctrl-click** the edge on Windows.
### Generate
Use **Generate** to add more vertices to the current mesh. Click **Generate** multiple times to increase the mesh complexity.
A more complex mesh can create smoother deformations, but it can also be harder to edit.
### Resetting a contour
Use **Reset** to return the mesh to its default contour.
## Managing meshes
### Naming
A mesh you haven't named takes the name of the image or component it deforms. For example, the mesh on "Arm" is named "Arm Mesh". Renaming the image renames the mesh, but a name you give the mesh stays.
In the timeline, keyed meshes appear under their image or component's row.
### Copying a Mesh
You can copy a mesh and apply it to another image.
**Step 1**
In the Hierarchy, select the mesh you want to copy and press **Cmd + C** on macOS or **Ctrl + C** on Windows.
**Step 2**
Select the image you want to apply the mesh to and press **Cmd + V** on macOS or **Ctrl + V** on Windows to paste the mesh.
### Swapping images
A mesh can continue to work when the image is changed.
This is useful when multiple images share the same basic structure. The same mesh can deform each face without creating a separate mesh for every image.
### Removing a Mesh
After an image has a mesh, the **Deform** section shows options for editing or removing it.
**Step 1**
Select an image on the Stage or Hierarchy and press **Enter** or go to the **Deform** section in the Inspector.
**Step 2**
Click the **Edit Mesh** or **Remove Mesh** button.
> [!WARNING]
>
> Removing a mesh deletes the mesh and its vertex edits from the image.
## Mesh view options
Mesh view options control how the mesh and image appear while editing. These options can make it easier to focus on vertices, edges, weights, or the deformed result.
* **Bounding Box Edit** - show a bounding box around selected vertices so you can transform them together.
* **Isolate** - show only the graphic or graphics being edited.
* **Show Weights** - show mesh weights while editing.
* **Deform** - toggle between the deformed and undeformed version of the image.
* **Show Triangles** - show or hide the triangle edges. When disabled, only vertices are shown.
* **Dim** - dim the image so the mesh is easier to see.