Make an Animated Beating Coronary heart with SVG

Make an Animated Beating Coronary heart with SVG

It’s Valentine’s day! So let’s get into the spirit of issues, getting all pink and smooshy within the course of, and code ourselves a easy animated beating coronary heart with SVG.

Right here’s what we’re going to create:

It is a nice train for familiarizing your self with SVG syntax and genuine animation. We’re going to take a premade SVG coronary heart, remind ourselves how the viewBox works, then add an animateTransform factor to regulate the beating motion. Let’s start!

1. Create a Coronary heart Icon

In your vector instrument of selection, draw a easy coronary heart icon. It doesn’t should be good, however make it one steady path for the sake of ease. I created mine on a canvas of 100x100px and stuffed nearly the entire thing. 

illustrated heart icon

Obtain the Illustrator and SVG variations of mine if you wish to use these.

Copy and Paste Right into a Textual content Editor

In most vector purposes these days you’ll be able to copy objects and paste the resultant SVG code right into a textual content editor. So do this with the center object. We’ll come again to this SVG snippet in a second.

2. Begin Writing SVG

In Codepen (or a blanco HTML file) start by writing the naked bones of an SVG factor:

Right here we’ve given our SVG the identical top and width as our authentic drawing. We’ve additionally set the viewBox at Zero 0 100 85. Which means that the window we’re viewing our SVG via begins on the coordinates Zero 0 (high left) and measures 100x85px, so it matches our SVG completely.

For a reminder of how viewBox works I like to recommend you check out this explainer by Kezz Bracey: 

With a view to see clearly what you’re coping with, add a CSS rule to paint the SVG background: 

Let’s additionally middle what we’re taking a look at, utilizing flexbox:

3. Add the Coronary heart Path

Now we have to nest a path factor within the SVG. Start with an empty path, with a fill coloration and an empty d:

The d defines a drawn path, so let’s add our path coordinates to that. Within the SVG snippet you pasted right into a textual content editor, take every part from the d attribute and paste it in our empty one. You must find yourself with a jumbled string that appears like this:

All that may have created the next:

4. Let Your Coronary heart Develop

I desire a larger coronary heart.

By doubling the SVG width and top attributes to width="200" top="170" we’ll double the dimensions of the entire thing. Or we might scale every part by 150% width="150" top="127". Or one thing else. We needn’t contact the viewBox values as they’ll keep relative to the Viewport we’ve simply modified.

5. Add a Contact of Animation

To animate the center we’re going to make use of an animateTransform factor, nested inside our SVG. 

Start by including the factor contained in the SVG, as a sibling of the trail:

It will animate the mother or father factor, ie: the entire <svg>. This gained’t be appropriate in lots of conditions, and it will likely be higher to animate the weather inside the <svg>, however this strategy works superb for us. For a refresher on how animateTransform works, Kezz (as standard) has you coated:

The attributes we’ve used are fairly self-explanatory. We’re making a scale remodel, with a period of 1s, which is able to repeat indefinitely. 

Add Values to the Rework

Now we have to add a listing of values, so it is aware of by how a lot to animate:

So right here the center begins at regular measurement (1), then scales to 1.5 regular measurement, then down a bit to 1.25, then again to 1.5, and so forth. These values give us the beating impact.

Observe: every worth takes an equal portion of the 1 second timing we’ve set. As you may think, the movement will seem to hurry up and decelerate relying on how a lot scaling it must do for every step.


I’ve to be trustworthy, I like this finish consequence! It’s a easy however efficient animation, and provides us the proper alternative to apply our SVG abilities. With a lavender colored background, right here’s the tip consequence (head over to CodePen and give it some hearts!)

Extra Beautiful SVG on Tuts+ Net Design

Supply hyperlink

Spread the love
No Comments

Post A Comment