Path reveal animation
Reveal the SVG path in effective animation
Overview
The reveal-path built-in effect generates a smooth, animated reveal of an SVG path, creating a dynamic line-drawing effect. When applied to the SVG path element, it progressively traces the path, making the design appear as though it’s being drawn in real time. This effect can be customized in terms of speed and easing, allowing for flexible animations that can enhance interactive graphics, logos, or illustrations on websites. Ideal for creating engaging visual transitions, the reveal-path effect adds a polished and dynamic touch to SVG-based designs.
Syntax
Default
The default reveal-path parameters:
| Name | Default value | Accepted values |
|---|---|---|
reveal-path |
- |
- |
Examples
These example show the reveal-path built-in effect in action using the animate trigger using the animate:reveal-path(<duration: 2s, iterations: infinite>) that sets the duration to 2s and make sure that animation plays forever.
Triggers
Since you can use any of the supported triggers, here are a couple of usage examples:
Hover
When you want to reveal a path on hover, it’s better to define the target element (usually the parent element) and apply the hover effect to it using the target parameter. We use hover(parent), where the parent refers to the nearest wrapper element.
Scroll
It is possible to create a reveal path animation on scroll using the scroll trigger.
Mouse
Similar to above, you can use a mouse or pointer trigger to create a revealing path animation.
Options
All property options passed in the <> are supported.