Fills and Strokes

Summary

This lesson covers the fundamentals of Fills and Strokes in Rive. It explains how to adjust colors (solid, linear, and radial gradients), opacity, and unique Rive features like Vector Feathering. Additionally, it explores advanced stroke settings, including caps, joins, path trimming, and dashing, as well as how to copy and paste styles between objects.

Step by Step

1. 00:10
   Basic Fill & Opacity

   Select a shape to modify its fill color and overall opacity using the slider in the properties panel.
2. 00:33
   Gradients

   Switch from solid colors to Linear or Radial gradients for more complex shading.
3. 00:42
   Vector Feathering

   Blur the edges of vector shapes (Inner or Outer) and use the "Offset" property to create shadow or glow effects.
4. 01:28
   Multiple Fills/Strokes

   Use the + button to layer multiple fills or strokes. Reorder them by dragging, similar to layers in the hierarchy.
5. 02:12
   Copy Style Shortcut

   Copy a shape's style using Option + Cmd + C (Mac) and paste it onto another with Option + Cmd + V.
6. 02:52
   Stroke Caps & Joins

   Choose between Flat, Round, or Square caps, and Round, Bevel, or Miter joins to define path ends and corners.
7. 03:30
   Apply Transform

   When set to true, stroke thickness scales with the object; when false, the stroke remains visually constant regardless of scale.
8. 03:58
   Trim Paths

   Use "Sequential" to trim multiple paths one after another, or "Synced" to trim them all simultaneously.
9. 04:23
   Dashes & Gaps

   Add dashes and gaps to strokes, adjust their size, and use "Offset" to animate the dash pattern along the path.

Notes About Current Rive

• Vector Feathering: Unlike traditional blur effects, Rive’s feathering is vector-native, allowing for high-performance and scalable edge blurring.
• Invisible Lines: By default, new paths created with the pen tool have a Fill but no Stroke. Straight lines may appear invisible until a Stroke is added.
• Trim Path Utility: Path trimming is a powerful tool for "drawing-in" animations, often used for icons and UI loading indicators.