How to Create a Scale Animation on SVG Drawings with SVG ANIMA

Are you looking to add some eye-catching animation to your SVG drawings? One way to do this is by using the Scale transform. In this tutorial, we’ll walk you through how to perform an infinite loop zoom animation on an SVG drawing using SVG ANIMA.

Step 1: Create your SVG Drawing
The first step in animating your SVG drawing is to create the drawing itself. You can use software such as Adobe Illustrator or Inkscape to create your artwork. Keep in mind that the animation will be a continuous loop, so consider the placement and design of your elements to ensure a seamless transition.

Step 2: Add the Scale Animation

After finishing your SVG drawing, import it into the SVG ANIMA app. Access the app by going to on your web browser and simply drag and drop your SVG file onto the workspace to begin animating.

Select the element to animate in the left panel or directly in the drawing. Click on the “ANIMATE” button and select “Scale”. This will open the Scale settings in the “ANIMATION” panel on the right.


Step 3: Edit your Scale Animation
In the animation panel on the right, you can adjust the percentage of scale for each keyframe of your animation by setting the horizontal (X) and vertical (Y) values. Additionally, you can customize the duration and easing options to create a smooth animation. If you want to add more keyframes, simply click on the “New Keyframe” button located in the right panel.

Then, check on the “Infinite” button next to the duration to activate the infinite loop.

When you’re happy with your animation, it’s time to export it. Just click on File > Save and Download. Your fresh animated SVG will appear in your Downloads folder.

With SVG ANIMA, creating scale animations for your SVG drawings has never been easier. Whether you’re a graphic designer, animator, or just someone who wants to add some extra flair to their designs, SVG ANIMA makes it easy to bring your SVG drawings to life. Follow our tutorials and you’ll be creating captivating animations in no time!