Fake 3D Rotation - How to Create & Animate an SVG Mask
Duration: 22:58
Learn how to create and animate SVG masks in SVGator to make 2D art appear 3D. This tutorial covers setting up clipping paths, containing graphics inside any shape, and animating both masks and their contents for a seamless depth illusion.
Step 1 - Mask The Eraser
Start by focusing on the eraser. This component is contained within a mask. Release the mask to inspect its contents: you’ll see the main eraser shape, which serves as the mask, and a background eraser shape placed outside of the mask. There’s also a smiley face repeated three times, which we’ll animate by shifting its position leftward to simulate rotation.
To keep everything properly clipped, duplicate the eraser shape, place it on top, select all relevant elements, and create a clipping path. This ensures the smiley face stays confined within the eraser as it moves. Once done, rename this group “eraser” and lock it in place.
Step 2 - Mask The Pencil Body
Next, move on to the pencil’s body. Like the eraser, this part uses a mask to create the rotation illusion. Inside the body group, you’ll find a pattern of nine vertical stripes, a black stroke, a metal section, and subtle gradients to enhance depth. Add the two accent lines to this group as well.
Then, locate the body mask (essentially the pencil’s silhouette) and place it above the contents. Select everything inside the body group, including the pattern, gradients, and metal parts, and create a clipping path.
Step 3 - Mask The Pencil Tip
Now turn your attention to the pencil tip. Release the mask to view its components. You’ll see the wooden section, its gradient overlay, the colored pencil tip, and a triangular shape that acts as the final masking layer.
Start by selecting the wood mask and the two wood elements beneath it, and create a clipping path to constrain them. Then select the triangle mask and group it with the wood section to form a second clipped layer. Rename this group “pencil tip” and collapse it to keep your workspace tidy.
Step 5 - Animate The Pencil Components
Start animating inside the masks. For the eraser, select the smiley face and add a position animation moving it left over 4 seconds, then loop it to create the rotation illusion. Lock the eraser group when done.
Next, animate the pencil body’s pattern by adding a position animation over 4 seconds, carefully aligning start and end points using guides to ensure a seamless loop. Lock the body group afterward.
For the pencil tip, select both the wood shape and its mask together, then add a position animation moving them over four seconds, again aligning start and end points for smooth looping. Lastly, add a rotation animation to the colored tip layer, making a full 360° turn in four seconds to simulate subtle movement and enhance the 3D feel.
Step 6 - Add Global Motion
Animate the entire pencil group’s position to create a floating effect by setting a curved path with varying speed over 4 seconds, starting and ending at the same point. Set the origin near the eraser for natural movement. Add a rotation animation to the group, swinging it gently from 10° to -10° and back over the same duration to mimic tilting.
Finally, animate the shadow’s position to move opposite the pencil’s tilt and add a scale animation between 1.05 and around 1.15 to simulate the shadow getting closer or farther from the surface. Adjust the shadow’s opacity to about 55% for subtle realism. Together, these animations complete the 3D rotating pencil effect.This technique can be extended to other illustrations, allowing you to replicate the process.
Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!
Related tutorials to help you out:
