Tutto Il Web

Main Menu

  • Home
  • Computer networking
  • Web development
  • Web design
  • Internet marketing
  • Web services

Tutto Il Web

Header Banner

Tutto Il Web

  • Home
  • Computer networking
  • Web development
  • Web design
  • Internet marketing
  • Web services
Web design
Home›Web design›5 SVG Animations to Liven Up Your Web Design

5 SVG Animations to Liven Up Your Web Design

By Julie R. Kelsey
May 7, 2022
0
0

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.

USE VIDEO OF THE DAY

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.

buttons that change the background color

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.

hello blow svg example

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);
});

svg css button hover border effect

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.

SVG clock on a 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.


Web form with inline animations

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.

Related posts:

  1. Adventist Journal Online | Website design, cybersecurity added to South Adventist University programs
  2. Why it’s important for your business to have a good web design
  3. What is the impact of IoT on web design and development in 2021?
  4. Web Design Tips for Small Business Websites

Categories

  • Computer networking
  • Internet marketing
  • Web design
  • Web development
  • Web services

Recent Posts

  • Computer Networking Diploma Guide: Everything You Need to Know
  • Future Web Design and Development
  • Internet marketing agency and consultant, Artisan Internet Marketing, moves from Mount Dora to Sanford, Florida
  • Commission sets goal to eradicate racial disparity in Greenville County | Greenville News
  • Nice article on CSS and Mobile: Alistapart – Community – SitePoint Forums

Archives

  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • February 2020
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • November 2018
  • September 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • June 2017
  • May 2017
  • April 2017
  • February 2017
  • August 2016
  • February 2016
  • November 2015
  • May 2015
  • January 2015
  • October 2014
  • April 2014
  • January 2014
  • September 2013
  • August 2013
  • June 2013
  • May 2013
  • March 2013
  • August 2012
  • Privacy Policy
  • Terms and Conditions