Shapes & Paths

Summary

This lesson explains the crucial distinction between Shape Layers and Path Layers in Rive. While path layers define the actual form and geometry of an object, shape layers control aesthetic properties such as fills, strokes, and draw order. This separation allows multiple paths to share the same styling, offering powerful flexibility for both design and performance.

Step by Step

1. 00:04
   Defining the Layers

   Every graphic in Rive consists of at least one shape layer (aesthetic) and one or more path layers (geometry).
2. 00:19
   Shape Layer Properties

   Shape layers handle fills, strokes, clipping, and custom draw orders.
3. 00:32
   Path Layer Form

   Modify the actual form of an object by entering "Edit Vertices" mode (tap Enter).
4. 01:11
   Multiple Paths

   A single shape layer can contain multiple paths. You can duplicate existing paths or move paths from other shapes into one container.
5. 01:41
   Inherited Styling

   When a path is moved into a new shape layer, it automatically inherits that shape layer's fills and strokes.
6. 02:03
   Efficiency with Single Shape Layers

   Grouping multiple paths under one shape layer allows you to change the color or stroke of all elements simultaneously.
7. 02:39
   Stroke Behavior

   Understand that multiple paths in one shape layer render their strokes together as a single unit, unlike separate shape layers which overlap based on the hierarchy.

Notes About Current Rive

• Organization: Using a single shape layer for complex objects (like a cloud made of multiple circles) is much more efficient than using many separate shape layers.
• Draw Order: Within a single shape layer, multiple paths do not follow an individual draw order for their strokes; they are treated as a combined vector object.
• Flexibility: You can drag and drop path layers between different shape layers in the hierarchy panel at any time.