Advanced SVG Masking

In this tutorial, you will learn how to create a dynamic spotlight effect that reveals text using SVG masking.

Step 1 - Prepare The Spotlight Circle

Begin by creating a circle that will serve as the spotlight. Give it a white fill for visibility at this stage, as it is the foundation for the light effect. This circle will later define the area revealed by the animation.

Step 2 - Create The Spotlight Projection

Next, construct the projection of the spotlight. Ensure snapping is enabled and the back grid is visible to maintain precise alignment of shapes. Start with a rectangle that matches the width of the spotlight circle. Convert the rectangle to a path so that its points are editable.

Step 3 - Shape The Projector Beam

Select the top corners of the rectangle individually and widen them symmetrically to form a trapezoid resembling a projector beam. Center the shape horizontally on the canvas to ensure uniformity.

Step 4 - Add Gradient To The Projection

Apply a linear gradient to the trapezoid. Set the top color to match the background and the bottom to white. This gradient simulates the fall-off of light from bright to dark, creating a more realistic projection effect.

Step 5 - Position The Origin And Animate Rotation

Select the projection layer and move the object’s origin point to the bottom of the shape. Add a rotation animator and set the rotation to negative 50 degrees. Move the timeline to two seconds, add a keyframe, and change the rotation to positive 50 degrees to define the sweeping motion.

Step 6 - Create A Loop And Smooth Motion

Copy the first rotation keyframe and paste it at four seconds to complete a looping animation. Apply ease-in-out easing to the rotation for smooth, natural motion.

Step 7 - Arrange Layers For Masking

Place the projection layer above the text layer. Select both the text and the projection, right-click, and choose “create mask”. This converts the gradient into a transparency effect where white areas reveal content, black areas hide it, and gradients produce partial visibility.

Step 8 - Refine With A Glow Effect

Duplicate the mask layer and position it behind all other layers. Open the fill properties and adjust the gradient slightly in position and opacity. This adds a subtle glow around the spotlight, enhancing realism.

Step 9 - Add Background Text Presence

Duplicate the text layer and place it behind the mask group. Assign it a color to create a faint background presence, improving the readability of the text before the spotlight passes over it.

Step 10 - Review 

Play the animation to see the spotlight sweep across the text with realistic light fall-off. 

This masking technique can be adapted to image galleries, product showcases, progress indicators, and other visual elements for dynamic reveal effects.