svg animation

Create a new SVG animation now!

New project

Creating masks in Affinity Designer

Similar to other vector editing softwares, in Affinity Designer the object you want to use as a mask must be in front of the other element. In this case we will use the blue circle to mask the orange star. In The Layers panel, right click on the blue circle (Ellipse) and choose “Mask to Below”.

svg animation

Go to File and choose Export…


Select SVG format (the orange file icon at the top of the panel) and click Export.

svg animation

Choose a name and the destination folder:

svg animation

Import the SVG file into SVGator. It should look like this:

svg animation

Please note that there's a browser compatibility error with Safari. In case you are running SVGator in Safari, the clipping mask will not be visible after the import. You can read more about this here.

More articles:

Creating masks in Adobe Illustrator

Creating masks in Gravit Designer

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