5 SVG Animations to Liven Up Your Web Design

You might find it hard to believe how easy it is to create beautiful, smooth animations with nothing more than CSS and SVG.

Animations can make a website feel slick and smooth, but how can you incorporate this feature into your own work? Join us and learn how to liven up your web design with these creative SVG animation examples.

Working With Scalable Vector Graphics

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

As well as being great for resizing, you can also use SVG code within 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.

1. Color Change Buttons by Mariusz Dabrowski

This example features four buttons with their own icons and a block-colored background. When you select a button, it changes from a circle to a rounded rectangle, while also switching the background color of the page 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 page's background color:

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

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

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;

While simple, this SVG animation example offers a unique way to make your website more engaging. This type of design feature is perfect for mobile websites and HTML-based apps.

2. Hello Stroke Animation by Toshiyuki Takahashi

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

The animation doesn't have keyframes, it simply applies a new stroke width alongside the CSS transition property. This makes each line draw itself across 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 the text using a single parent CSS class to further lower the density of the code.

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

setTimeout(animationStart, 250);
});

3. CSS-Only Button Border by Sean McCaffery

As a CSS-only example, 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 morphs 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 complete button at 100% 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 SVG shape button outline when the user moves the cursor over the button. It uses the :hover CSS 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 make more elaborate interactive elements for your own website.

4. Simple Clock by Mohamad Mohebifar

With so many interesting techniques under the hood, it is 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 runs.

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 the realm of web design, but it is useful for countdown timers, clocks, and storing timestamps. This example also offers an insight into creating dynamic SVG animations with variables.

5. CSS-Only Form Field Lines by David Khourshid

This CSS-driven SVG animation provides a neat way to make any form look incredible.

With nothing selected, the form has grayed-out lines beneath each field. A line appears when a field gets selected, sliding in from the left with a smooth animation. If the user selects a different field, the line slides to its new position in a smooth motion.

Finally, once the user presses the Login button, the line turns into a circle that pulsates as the page loads.

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

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

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

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

Creating 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 build SVG animations that will make your website shine.