How to Animate SVG clipPath — Reveal and Mask Animations
Animate SVG clipPath for cinematic reveal effects, wipe transitions, and creative mask animations using CSS and JavaScript.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG clipPath Basics
SVG `<clipPath>` defines a shape that masks the visible area of its target element. Anything inside the clip region shows; anything outside is hidden. Animate the clip shape to create reveal effects — a rectangle that grows from 0 width to full width reveals the content with a wipe animation.
- Define: `<clipPath id='reveal'><rect id='clip-rect' .../></clipPath>`
- Apply: `<image clip-path='url(#reveal)' href='image.jpg' />`
- Animate: change `#clip-rect` width from 0 to full width
CSS Animation on clipPath Shapes
Animate the clipPath's inner shape with CSS `@keyframes` for pure CSS reveal effects. A `<rect>` inside `<clipPath>` animated from `width: 0` to `width: 100%` creates a left-to-right wipe. Circle expansion, diagonal wipes, and custom path reveals are all achievable with clipPath animation.
- Wipe: animate rect width 0 → 100% for horizontal reveal
- Circle reveal: animate `r` attribute of `<circle>` inside clipPath
- Custom shape: animate path `d` attribute for organic reveal shapes
Frequently Asked Questions
Can I use SVG clipPath to reveal a photo with an animated shape?
Yes — place a photo inside an SVG with `<image>`, apply a `clip-path` referencing a `<clipPath>` that contains an animated shape. As the clipPath shape grows or changes, it reveals more of the photo. This creates masked reveal effects like circle wipes and shape reveals.
How is SVG clipPath different from CSS clip-path?
SVG `<clipPath>` is defined inside the SVG and references SVG coordinate space — good for complex SVG shapes. CSS `clip-path` applies to HTML elements and accepts basic shapes (circle, ellipse, polygon, inset) or a reference to an SVG clipPath. For animating complex paths, SVG clipPath is more powerful; for simple shapes, CSS clip-path is simpler.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG