www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

How to Make an Animated Beating Heart with SVG

It’s Valentine’s day! So let’s get into the spirit of things, getting all pink and smooshy in the process, and code ourselves a simple animated beating heart with SVG.

Here’s what we’re going to create:

This is a great exercise for familiarizing yourself with SVG syntax and authentic animation. We’re going to take a premade SVG heart, remind ourselves how the viewBox works, then add an animateTransform element to control the beating movement. Let’s begin!

1. Create a Heart Icon

In your vector tool of choice, draw a simple heart icon. It doesn’t need to be perfect, but make it one continuous path for the sake of ease. I created mine on a canvas of 100x100px and filled almost the whole thing. 

illustrated heart icon

Download the Illustrator and SVG versions of mine if you want to use those.

Copy and Paste Into a Text Editor

In most vector applications nowadays you can copy objects and paste the resultant SVG code into a text editor. So do that with the heart object. We’ll come back to this SVG snippet in a moment.

2. Start Writing SVG

In Codepen (or a blanco HTML file) begin by writing the bare bones of an SVG element:

Here we’ve given our SVG the same height and width as our original drawing. We’ve also set the viewBox at 0 0 100 85. This means that the window we’re viewing our SVG through begins at the coordinates 0 0 (top left) and measures 100x85px, so it matches our SVG perfectly.

For a reminder of how viewBox works I recommend you take a look at this explainer by Kezz Bracey: 

In order to see clearly what you’re dealing with, add a CSS rule to color the SVG background: 

Let’s also center what we’re looking at, using flexbox:

3. Add the Heart Path

Now we need to nest a path element in the SVG. Begin with an empty path, with a fill color and an empty d:

The d defines a drawn path, so let’s add our path coordinates to that. In the SVG snippet you pasted into a text editor, take everything from the d attribute and paste it in our empty one. You should end up with a jumbled string that looks like this:

All that will have created the following:

4. Let Your Heart Grow

I want a bigger heart.

By doubling the SVG width and height attributes to width="200" height="170" we’ll double the size of the whole thing. Or we could scale everything by 150% width="150" height="127". Or something else. We needn’t touch the viewBox values as they’ll stay relative to the Viewport we’ve just changed.

5. Add a Touch of Animation

To animate the heart we’re going to use an animateTransform element, nested within our SVG. 

Begin by adding the element inside the SVG, as a sibling of the path:

This will animate the parent element, ie: the whole <svg>. This won’t be suitable in many situations, and it will be better to animate the elements within the <svg>, but this approach works fine for us. For a refresher on how animateTransform works, Kezz (as usual) has you covered:

The attributes we’ve used are reasonably self-explanatory. We’re creating a scale transform, with a duration of 1s, which will repeat indefinitely. 

Add Values to the Transform

Now we need to add a list of values, so it knows by how much to animate:

So here the heart begins at normal size (1), then scales to 1.5 normal size, then down a bit to 1.25, then back to 1.5, and so on. These values give us the beating effect.

Note: each value takes an equal portion of the 1 second timing we’ve set. As you might imagine, the motion will appear to speed up and slow down depending on how much scaling it needs to do for each step.

Conclusion

I have to be honest, I love this end result! It’s a simple but effective animation, and gives us the perfect opportunity to practice our SVG skills. With a lavender coloured background, here’s the end result (head over to CodePen and give it some hearts!)

More Lovely SVG on Tuts+ Web Design