Creating SVG Animations Using Tailwind CSS
semaphoreci.com/blog/svg-animations-tailwind-css
By Mbaziira Ronald
July 4, 2023
SVG, which stands for Scalable Vector Graphics, is a vector-based graphics file format
that allows graphics to be displayed at any size without losing quality.
For the use of illustrations, icons, and logos on websites and applications, SVGs have
proven to be an invaluable resource. Their ability to be easily customized and animated
makes them a versatile tool for web designers and developers. Whether a simple
hamburger icon for a mobile menu or an intricate illustration, SVGs icons provide a
lightweight and flexible solution for modern web design.
Among the many uses of SVGs is web animations. From giant social media platforms like
Twitter and Instagram to small SaaS websites, nearly all have adopted SVG animations.
Web animations are visual effects created using web technologies such as CSS and
JavaScript. These animations are usually interactive and thus improve user experience.
One of the ways of animating SVGs is via code manipulation, which is done using tools
such as CSS and JavaScript.
This article will teach you how to create SVG animations using Tailwind CSS. You will
also learn how to create an SVG animation in CSS and the use cases of animated SVGs.
Let’s get started!
Prerequisites
To follow along well in this article, you will need knowledge on:
HTML Basics
CSS Basics
CSS Animations
Tailwind CSS
Resources
For this tutorial, we will use a heart SvG icon from Hero icons.
What are SVG animations?
Take a look at the animating SVG below. Have you seen something like it before?
1/15
Well, if you have, that’s awesome, but if you haven’t, allow me to get you up to speed.
SVG Animations are animations created using Scalable Vector Graphics via the
manipulation of SVG graphic elements such as <path/> and <circle/>.
Types of SVG animations
There are 3 main types of SVG animations, and these are:
1. SMIL SVG Animations
2. Script SVG Animations
3. CSS SVG Animations
Let’s look at the three types in a bit more detail.
SMIL SVG Animations
These are animations created using Synchronized Multimedia Integration Language
(SMIL). SMIL is an XML markup language that enables one to perform multimedia
presentations on files. It provides animation elements such as <animate> </animate>
that you can use to animate various SVG attributes and properties.
SMIL Animations have recently fallen out of favor due to the rise of more modern SVG
animations, particularly those performed using JavaScript and CSS.
Script SVG Animations
Script SVG animations are created using scripting languages like JavaScript, TypeScript,
and CoffeeScript, with the majority made in JavaScript
2/15
Developers typically use frameworks and libraries like ThreeJS and AnimeJS and
sometimes vanilla versions of their scripting languages to create these animations. These
tools provide greater control over SVG animations than SMIL or CSS.
CSS SVG Animations
These are SVG Animations created using Cascading Style Sheets (CSS). CSS allows the
use of predefined styles and transitions to create animations. They are set off by user
interactions such as hover and click.
CSS SVG animations have gained wide use in the developer community due to their
support by many modern web browsers such as Chrome, Firefox, and Safari. These
animations are also preferred over SMIL or Script animations since they are lightweight,
effective, and less vigorous in implementation.
Vanilla CSS or CSS frameworks such as Tailwind are used to make CSS SVG
Animations.
With all that said, let’s get more technical by creating some CSS SVG animations.
How to create an SVG animation using CSS
Our goal in this tutorial is to learn how to create SVG animations using Tailwind CSS.
However, it would be good if you knew how to make one in CSS too. Let’s explore
creating an SVG animation from scratch.
We are going to create a simple Heart SVG line animation. An SVG line animation is a
kind of SVG animation where the SVG path or stroke is animated to look like it is drawing
a line shape or moving.
The animation will look like the one in the gif below.
3/15
Now, to create SVG line animations, we mainly depend on the stroke-dasharray,
stroke-dashoffset, stroke-width, properties. These four are presentation attributes but
we use them as CSS properties.
The stroke specifies the outline color of the shape and the stroke-width defines the
width of the stroke.
“The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes
and gaps used to paint the outline of the shape.” (Source)
“The stroke-dashoffset attribute is a presentation attribute defining an offset on the
rendering of the associated dash array.” (Source)
We now know what we need and why we need it. Let’s now create our SVG line
animation.
Follow the below steps to get started:
1. Visit Hero icons, search for a heart SVG and copy its code.
2. Paste the SVG code you have copied in your Editor. Your SVG code should now
look like the code below.
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokewidth="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round"
stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597
1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0
7.22 9 12 9 12s9-4.78 9-12z" /> </svg>
3. Add a container around the SVG, as shown in the code below. It will help us to center
the SVG in the center of the web page. Remove the class attribute since it isn’t doing
anything (currently), and replace it with height and width attributes of 300px.
4/15
<body>
<div class="container">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1"
stroke="rebeccapurple"
height="300px"
width="300px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312
2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9
12s9-4.78 9-12z"
/>
</svg>
</div>
</body>
4. Go to your CSS file and paste the code below into it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
path {
stroke-dasharray: 15;
animation: move 35s linear infinite;
}
@keyframes move {
to {
stroke-dashoffset: 1000;
}
}
Preview
5/15
Code walkthrough
HTML
We paste our heart SVG into the HTML file, and it already has two of the four main
attributes that we need to create our line animation, the stroke, and stroke-width
attributes.
The stroke has a color of rebeccapurple and a width of 1. You can change these to
your desired values.
Note:
You can still declare the attributes as CSS properties in your CSS file or modify them
directly from the HTML in the SVG element. However, having them in your CSS gives
more flexibility, and you don’t have to move back and forth between your Markup and
style files.
CSS
First, we set all the styles from our HTML elements to their initial values using the
asterisk (*) universal selector.
Second, we give our body a height of 100vh (viewport height) and a width of 100vw
(viewport width). The SVG container will later inherit the body’s height.
Third, we make the container of the SVG element inherit the height of its parent, the
body, by giving 100% of it. This enables us to center the SVG right in the center of
the web page.
Fourth, we declare a stroke-dasharray of 15 on our SVG path element. It gives a
length of 15px to the dashes and gaps of the shape. We also define an animation
on the path with an animation name of move, a duration of 35s, linear progression,
and playing infinitely.
6/15
Last, we create the animation using @keyframes and give it an ending offset of
stroke-dashoffset of 1000.
Note:
You can define the length of the dashes and gaps separately. It is by specifying two
values on the stroke-dasharray property. See the example below.
path {
stroke-dasharray: 15px 8px;
}
/*
This gives the dashes a length of 15px and the gaps a length of 8px.
*/
We shall leave our property as it is.
How to create an SVG animation using Tailwind CSS
We have seen how to create an SVG line animation using CSS. Let’s now see how we
can do the same using the CSS framework, Tailwind.
We are going to use Tailwind’s playground, Tailwind Play for this demo. This is because
the playground doesn’t require us to do any prior installations of Tailwind or any packages
but provides all of Tailwind’s functionalities right inside the playground.
“Tailwind Play is an advanced online playground for Tailwind CSS that lets you use all of
Tailwind’s build-time features directly in the browser.” (Source)
To get started, follow the steps below.
Visit the Tailwind Playground website. The playground looks like the image below
7/15
2. Highlight and delete all the code found in the HTML tab. It creates space for where we
are going to write our code.
3. Paste the following HTML code into the editor. We shall use the same SVG used for
the CSS line animation. The stroke and stroke-width will remain unchanged.
8/15
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1"
stroke="rebeccapurple"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312
2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9
12s9-4.78 9-12z"
/>Let's center our SVG in the middle of the page by giving its container
the below classes.
</svg>
</div>
4. Let’s center our SVG in the middle of the page by giving its container the below
classes.
<div class="h-screen flex justify-center items-center">
<svg>...</svg>
</div>
Your code and SVG should now look like the image below.
Yes, yes, I know. Our SVG is tiny and quite strains the eyes to view. But don’t worry, let’s
fix that by changing the width and height.
9/15
Go to the class attribute and change both the height and width to 72.
Looking much better now! Let’s now start creating our animation.
Give the path SVG element the stroke-dasharray property that will define the length
of the dashes. We will add it using custom CSS in the CSS tab since Tailwind hasn’t
added support for this property.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
path {
stroke-dasharray: 15;
}
}
Add an animation to the path element (but this won’t start any animation yet!)
<path
class="animate-[move_35s_linear_infinite]"
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.7151.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 912z"
/>
Here is what is happening with the previous code:
10/15
We have added an animation to the path SVG element using arbitrary values.
Arbitrary values allow us to use Tailwind’s bracket notation to declare values not
provided by Tailwind’s classes and which we only need to use once, without
necessarily setting them up in the config file. You can read more on Tailwind’s
arbitrary values here.
The animation’s name is move, with a duration of 35s, progressing linearly and
running infinitely.
Our SVG currently looks like the image above.
Now, there is only one thing left to do for our animation to run, setting it up in the
config tab. Let’s do that.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
move: {
to: {
strokeDashoffset: '1000'
},
},
},
},
},
}
Tada! Here is our animation in Tailwind CSS
11/15
You can take this to the next level by defining any transitions and transformations on the
stroke. Let’s say we want the stroke to change to red as the animation progresses. We
can add that to our move animation in the config tab.
Let’s do it!
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
move: {
to: {
strokeDashoffset: '1000',
stroke: red
},
},
},
},
},
}
We can also reduce the animation duration time from 35s to 10s so that the transition
happens much faster, and also reduce the stroke-dashoffset to 700.
Result
12/15
Looks awesome!
Here is the link to the animation in the playground. You are free to check it, tweak it, and
practice your skills on it.
I encourage you to create more animations to sharpen your skills. With that said, here is
another example I created on CodePen for you to practice.
Why use Tailwind CSS over CSS?
You may prefer Tailwind CSS to CSS for creating SVG animations for several reasons.
Let’s take a look at them below.
1. Responsiveness
Tailwind CSS was designed with responsiveness in mind with classes such as sm, md, and
lg making it easier to make SVG animations responsive on various screen devices, thus
improving the overall responsiveness of the site.
2. Cross-browser compatibility
Unlike CSS, Tailwind CSS is tested for compatibility on all the latest versions of major
browsers, such as Firefox, Chrome, Safari, and Edge. This ensures that your SVG
animations will render as intended without breaking changes, and the site users will enjoy
a better user experience.
3. Consistency
Tailwind CSS provides reusable classes that you can use to provide uniformity to all your
SVG animations thus ensuring consistency across the site.
13/15
4. Faster Development
The framework offers pre-built styles, components, and icons that speed up the
development process and allows you to create SVG animations quicker than you would
with CSS by writing all the code from scratch, which saves time.
5. Code optimization
By combining minification and data compression, Tailwind CSS produces much lighter
CSS files ready for production than CSS. This makes the performance and loading time
of your site significantly better.
6. Community support
Tailwind CSS has a large and active community that provides continuous support and
development, bug fixes, and other updates. The framework has more than 7,000
questions on Stack Overflow.
Use cases of SVG Animations in web development and design
So far, we have seen what SVG animations are and how to create one. Let’s now look at
their use cases: the areas in web development to use them.
Call-To-Action Button Animations: these are one of the most common use cases
of SVG Animations. Their use is more appropriate on social interaction buttons on
platforms such as Twitter, Instagram, and Facebook.
Loading Animations: SVG Animations are used to create interactive loading
animations that engage users while they wait for a page or resource to load.
Prompts: prompts are another common use case. An example of this is on blog
articles, where after reading, you see a question or popup like “Have you found this
useful?” or “How likely are you to recommend this article to your friends?”
Logos: SVG animations can also be incorporated into logos to make them
engaging and capture the website visitors’ attention. Mailchimp‘s logo is one
example of this. When you hover over the SVG logo, the head of the chimp nods
and winks.
There are many other use cases and real-world examples of SVG animations. The ones
mentioned above are only the tip of the iceberg.
Conclusion
You have learned how to create SVG animations using Tailwind CSS and how to make
them using CSS. In addition, you have learned about their many use cases in web
development.
As Tailwind CSS adds more support and functionality for more CSS properties, its use in
creating SVG animations will grow.
14/15
Thanks for reading.
Happy learning. Happy coding!
15/15