Path Direction & Fill Rules

7m 06sPublished Sep 8, 2025

Rive 101 - Path Direction and Fill Rules

SummaryVersion Notes (Draft)

This lesson provides an in-depth look at how path direction affects vector fill logic. It focuses on the "Non-Zero" fill rule, demonstrating how to create holes or merge shapes by toggling between clockwise and counter-clockwise directions. Additionally, it covers the "Clockwise" fill rule and the "Subtract Path" option, which offer a more intuitive workflow when using Vector Feathering.

Workflow Optimization: While Non-Zero is powerful, using Clockwise combined with Subtract Path is generally more intuitive and less prone to errors in Rive.
Technical Tip: Mastering Path Direction is essential for managing Bezier Handles and procedural geometry effectively.
Feathering Compatibility: If your shape requires soft edges (feathering), you must switch to the Clockwise mode and utilize the Subtract Path property for any interior cutouts.

📌 Key Points

How path direction affects fills, how the non-zero fill rule works, and how direction/rule combinations create cutout effects.

📝 Notes

Markdown

0 chars

Step by Step

00:04

Identifying Path Direction

Every path has a specific direction. In Edit Vertices mode, the arrow-shaped vertex indicates the flow of the path.
00:54

Reversing Path Direction

Use the Reverse Direction button in the top toolbar to toggle the path between clockwise and counter-clockwise.
01:12

Non-Zero Fill Logic

Under the default rule, clockwise paths are assigned +1 and counter-clockwise -1. Rive calculates the sum; any non-zero area is filled.
01:54

Creating Holes

When two paths within the same shape layer have opposite directions and overlap, the sum becomes zero, resulting in a transparent hole.
03:07

Impact of Scaling

Setting a path's X or Y scale to -100% flips its direction. If this causes unexpected fills, the direction must be manually adjusted.
04:09

Clipping Groups

When a layer is clipped to a group containing multiple paths, the directions of all paths within that group are factored into the fill rule.
05:04

Vector Feathering Limitations

Enabling Vector Feathering forces the "Clockwise" fill rule, meaning reversing path direction will no longer create holes.
06:04

Using the Subtract Path Option

Under the Clockwise rule, checking the Subtract Path box on a specific path is the preferred way to create holes without worrying about direction or scale.