LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
SVG Reveal Configurator

How to Use in Bricks Builder

  1. Customize your SVG reveal effect using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-svg-reveal📋
    to any SVG element
This tool creates a custom script with your settings built-in. You only need to add the data attribute to implement your SVG reveal effect!
BricksFusion Exclusive Get Your SVG Reveal Effect

Bring your SVG icons and illustrations to life with smooth, attention-grabbing reveal animations.

  • Easy implementation with simple data attributes
  • Customizable animation timing and easing
  • Fully responsive and mobile-friendly
  • Works with any SVG path, shape, or group
Animation Settings
Duration 1500ms

Total duration of the animation

Base Delay 0ms

Initial delay before animation starts

Delay Increment 100ms

Delay between each element in sequential mode

Animation Style
Animation Order
Each element animates one after another
All elements animate at the same time
Easing Function

Controls how the animation accelerates and decelerates. 'Ease-in' starts slow and ends fast. 'Ease-out' starts fast and ends slow. 'Ease-in-out' is slow at both start and end, fast in the middle. 'Linear' has a constant speed.

Appearance
Stroke Color

Color of the animated stroke

Fill Color

Internal fill color of the SVG after animation. This color will replace the original SVG fill color.

Stroke Width 1px

Thickness of the animated stroke

Intersection Threshold 0.5

How much of the SVG must be visible to trigger animation

JavaScript Code