But how do you make an SVG animation? Start with an SVG shape, animate it using CSS, and build upon these principles to use animation in your own work.
Animating SVGs With HTML and CSS
Although you can use JavaScript to programmatically animate SVGs, CSS now has good support for animations too. You can find all the sample code on the CodePen for this project.
Building an SVG Image Inside HTML
The first step in this process is building the SVG image you will be working with. You can find SVG markup in the HTML panel on CodePen.
SVG Structure
While SVGs share a similar format to HTML, the tags you use to create them are different. An SVG has opening and closing tags () that can contain a variety of different properties. In our case, we are using id and viewBox properties. The id property works like any other HTML ID, providing you with a unique identifier to use in your CSS/JS. The viewBox property sets the size of our SVG.
You can use width and height properties instead, as the following example demonstrates. However, viewBox creates a responsive SVG that will match the size of the viewport without breaking its aspect ratio.
SVG Shapes
You can create detailed images with SVGs, with an array of different shape tools at your disposal. This SVG example uses three of the shapes available, but there are many others. Each of the shapes in this example has a unique ID that the CSS animations can use later.
SVG Ellipse: This is a circle/oval tool. It specifies properties for the y/x axis radius (rx/ry), fill color, and stroke width. It’s important to remember that the radius you choose with this tool will be half of the diameter of the shape.
SVG Rect: The SVG rect tool creates a square or rectangle. This one has properties for width/height, a transform, fill color, and stroke width.
SVG Polygon: Use an SVG polygon to set a specific number of points and create arbitrary shapes of different sizes. The polygon in the example is three-sided, making it a triangle, and you can see the position of each point plotted in its properties. Along with this, we have properties for the position, fill color, and stroke width of the triangle.
Once the animation is in place, the shapes will line up next to one another.
These three SVG shapes are some of the most common, but there are more for you to choose from. You can use the following shapes when working with an SVG animation:
SVG Circle: This shape is similar to an ellipse, but it always has equal X and Y radiuses. SVG Line: An SVG line is a single line segment with two points, one at each end. SVG Polyline: Polylines are like basic lines, only they can have more than two points. SVG Polygon: SVG polygons are like rectangles, only they can have more than four points, making complex shapes possible. SVG Path: SVG paths work similarly to the pen tool in Adobe Photoshop. Lines can connect like a polyline/polygon, but they can also have curves applied to them.
How to Animate SVGs With CSS
Now that you have some shapes inside your SVG, it’s time to move on to the CSS animation. Each of the shapes has a different animation to demonstrate some of the options you have, but there are loads more to explore with your own designs. The circle moves across the screen, the square’s corners become round, and the triangle rotates. All these use CSS keyframes to create smooth animations.
Moving the Circle Using Transform and Translate
The circle in the SVG example moves from the bottom to the top of the screen during its animation cycle. You need to assign an animation to the circle before it can move, via a CSS property:
The first word in the value, circle_anim, is a name for the animation. It runs for two seconds (2000ms). It has a linear curve that keeps its speed consistent and is set to run an infinite number of times in the forwards direction. You can use keyframes to define individual phases of the animation:
There are six keyframes in this animation, so the circle will move to six different locations in each cycle. The transform: translate property sets the position of the circle at each stage. At 0% the circle is in the middle of the screen and moves up and out of view by 45%. By 50% it has moved left of the screen before moving down below the viewport at 55%. The circle moves back into its horizontal position by 60%, and the animation is complete at 100% with the circle back in the middle of the screen.
Animate the Square’s Border Radius Property
The square in the example offers a good reference for general property animations. As long as you know the correct syntax to use, you can animate any CSS property. The border-radius property is a good demonstration of this. The square has sharp corners that turn into rounded corners and then back into square corners again.
The square animation is called square_anim and it has a two-second run-time. The ease-in-out curve makes the animation slower at its beginning and end, creating a smooth effect.
As you can see, this animation has four keyframes. The X and Y border-radius changes from 0px to 40px between 0% and 45%, pausing at 40px until 55%. It then goes back to 0px for each radius by the time the animation reaches 100%.
Rotate the SVG Triangle With Transform
The final SVG animation in the example is the simplest, with the triangle rotating around its center point. The shape completes a full revolution every two seconds and continues running infinitely. It has an ease-out curve that results in the animation slowing at the end. The animation is called triangle_anim.
This animation has two keyframes, one at 0% and the other at 100%. The Transform rotate property turns the triangle from 0deg at 0% to 360deg at 100%, creating a full spin.
How to Animate Other Properties
The three animations covered above are a good starting point when you are working with SVGs, but you will likely want to push this further. You can use the CSS animate rule to adjust almost any property value you can assign to your SVG. This includes basic values, like sizing and positioning, as well as more advanced values, like borders, shadows, and blend modes.
In rare cases where CSS can’t do the job, you can use JavaScript code to animate SVG images. You can find loads of guides to help you with this once you feel ready to take the next step with your SVGs.
Making Your Own SVG Animations
Whether you’re a web designer, software developer, or simply a creative person, SVG animations can be fun and satisfying to make. You can find plenty of resources around the web that can help you with web-based animation, once you’re comfortable with the basics.
