Create a clipping path animation

What's a clipping path?

Clipping paths will make certain elements visible within an area and completely hidden or clipped outside of that area. They are very commonly used in graphic design to hide unwanted parts of an image, but they also unlock a wide range of animation possibilities when it comes to SVG animations.

In SVG animations, clip paths are closed vector paths. In a clip group, the elements that are under the clip path, will be partially hidden outside of the clip path area and visible within that specific area.

How to generate a clipping path?

The import of clip path elements is fully supported by SVGator from all major editing tools such as Illu strator, Sketch, Figma, Gravit, and more, but you can also create clip paths from scratch in SVGator.

To generate a clip path in SVGator, you will need at least two elements visible on the canvas. You can also use multiple elements at the same time as clip paths, but we will talk about that a bit later.

In the following example, we would like the tram to be visible only within the A letter area and hidden outside of it:

clipping path animation
The elements used as a clipping path

When you are creating a clip path, the element on top will become a clip path to the element that's under it. In this case, to make the tram visible within that specific area only, we will make a duplicate of the A letter and place it on top of the tram.

clipping path animation
Make sure the clipping path is on top of the element you want to clip

Select both elements, the A letter and the "Tram" group, right-click -> "Create clipping path". The element on top will become a clip path for the element underneath it, just like a window through which we can see the content inside.

clipping path animation
Right click and choose clipping path

Take a look at the list on the left side. There's a new clip group including all elements forming the clip path. This group and the clip path itself are underlined, because they are not regular groups or elements. The A letter is now a "Clipping paths" group. It says "paths", because, as we also mentioned earlier, you can use multiple elements in the same group as clipping paths.

Let's try that now by adding a new element to the project.

clipping path animation
You can use multiple elements as a clipping path

As we move the "square" element in the "Clipping paths" group, above the "Copy of Letter" element, it will automatically work as a clip path, making the tram's right side under it visible.

clipping path animation
Drag the extra element into the clipping paths group to apply it

If you don't need it as a clip path anymore, you can select the clip path or the whole group, right-click -> "Release clipping path".

How to animate a clipping path?

In your SVG animation, clipping paths and all other elements in the clipping path groups can be animated just like regular elements.

For clipping path groups you can use Transform animators such as Position, Scale, Rotate, and more. For the clip path itself, you can use all animators.

clipping path animation
You can anime any part of the clipping path individually

More articles:

How to animate an element

Animators and keyframes

Still got questions? Send us an email to and we will get back to you as soon as we can.