Animations can make a website smooth and fluid, but how can you incorporate this functionality into your own work? Join us and learn how to animate your web design with these creative SVG animation examples.

Work with scalable vector graphics

SVG is a file format that uses lines rather than pixels to store and display images. As the name suggests, scalable vector graphics can scale without loss of quality.

Besides being great for resizing, you can also use SVG code in HTML, and it will act like any other element. This means that you can use CSS rules, JavaScript code, and most importantly, animations with your website’s SVGs.

You can create SVGs using software like Adobe Illustrator and websites like SVGator, but you can also create them by hand. The SVG format is a plain text XML language and looks a bit like HTML.

This example has four buttons with their own icons and a block color background. When you select a button, it changes from a circle to a rounded rectangle, while changing the page background color to match the button.

A mix of JS and CSS produces these results, and it all starts with a loop that adds event listeners to each button.

for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', buttonClick);
}

Once a button is clicked, a function called buttonClick() performs several actions. It starts by changing the background color of the page:

document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`;

After that, it adds a CSS class to the button that was pressed, triggering an animation and changing the background color of the button.

menuItemActive.classList.remove('menu__item--active');
this.classList.add('menu__item--active');
menuItemActive.classList.add('menu__item--animate');
this.classList.add('menu__item--animate');
menuItemActive = this;

Although simple, this SVG animation example offers a unique way to make your website more attractive. This type of design functionality is perfect for mobile websites and HTML applications.

You can add as many nodes as you want to an SVG path, making them ideal for creating text. This simple stroke animation demonstrates the technique perfectly, with text appearing from left to right as if it’s being written.

The animation has no keyframes, it just applies a new stroke width next to the CSS transition property. This allows each line to draw on the screen without complicated animation.

.path-1 {
stroke-dasharray: 1850 2000;
stroke-dashoffset: 1851;
transition: 5s linear;
}

A JS function adds a unique CSS class to each section of text using a single parent CSS class to further reduce code density.

$(function() {
function animationStart() {
$('#container').addClass('fin');
}
setTimeout(animationStart, 250);
});

As a CSS example only, this SVG animation is great for anyone who doesn’t want to dip their toes into JavaScript code. The idea is simple: a button starts with an underline that turns into a full border when you hover over it.

CSS keyframes create two states for the button. The first state has a thicker stroke and only covers the bottom of the SVG shape button, starting at 0%. The other state is the 100% complete button with a thinner stroke.

@keyframes draw {
0% {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 2px;
}
}

These keyframes are only applied to the outline of the SVG shape button when the user moves the cursor over the button. It uses the CSS :hover pseudo-class to achieve this, triggering a rule that adds the animation keyframes to the button.

.svg-wrapper:hover .shape {
-webkit-animation: 0.5s draw linear forwards;
animation: 0.5s draw linear forwards;
}

This shows how you can create beautiful animations without using complex code. You can use these fundamentals and your creativity to create more elaborate interactive elements for your own website.

With so many cool techniques under the hood, it’s hard to decide what to discuss when looking at this SVG clock example.

To start, it uses the Date() function to collect the current date and time. Using this value, the getHours(), getMinutes(), and getSeconds() functions split the data into its relevant parts. The code then calculates the position of each hand on the clock.

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

By storing each of the hands in an array, their positions can be set very easily each time the code is run.

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

Time has limited applications in web design, but it’s useful for countdowns, clocks, and storing timestamps. This example also provides an overview of creating dynamic SVG animations with variables.

This CSS-based SVG animation offers a nifty way to make any form look amazing.

If nothing is selected, the form has gray lines under each field. A line appears when a field is selected, sliding from the left with a smooth animation. If the user selects a different field, the line slides to its new position in one fluid motion.

Finally, once the user presses the key Login button, the line turns into a circle that vibrates when the page loads.

This SVG example is particularly impressive because it relies solely on CSS to produce such a complex result. It uses CSS variables to store data, which makes it easier to control things like the main app.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;

width: $app-width;
height: $app-height;
padding: $app-padding;
background: white;
box-shadow: 0 0 2rem rgba(black, 0.1);
}

You can use this example on just about any web form and engage your users like never before.

Create your own SVG animations with HTML, JS and CSS

Creating an SVG animation from scratch can be a difficult process when you first get started. These examples will give you the head start you need to create SVG animations that will make your website shine.