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.
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.
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 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.
Once a button is clicked, a function called buttonClick() performs several actions. It starts by changing the page's background color:
After this, it adds a CSS class to the button that was pressed, triggering an animation and changing the button's background color.
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.
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.
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.
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.
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.
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.
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.
By storing each of the hands in an array, their positions can be set very easily each time the code runs.
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.
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.
You could use this example on just about any web form, and engage your users like never before.
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.
Samuel is a UK-based technology writer with a passion for all things DIY. Having started businesses in the fields of web development and 3D printing, along with working as a writer for many years, Samuel offers a unique insight into the world of technology. Focusing mainly on DIY tech projects, he loves nothing more than sharing fun and exciting ideas that you can try at home. Outside of work, Samuel can usually be found cycling, playing PC video games, or desperately attempting to communicate with his pet crab.
Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!