Learn How to Animate a Heartbeat with CSS and SVG

with svgnarly

F0sg4wbjtwqmz9v2qt37?cache=true

Drawing the SVG Heart

Every great animation must start with a great SVG graphic! The goal of this lesson is to introduce you to some of the basic techniques we use at SVGnarly.com to create animated images for advertisers and web developers

A Scalable Vector Graphic, or SVG, is a image file format that can be drawn with several popular illustration applications. For this lesson , I am going to be using Adobe Illustrator, but you could also use Sketch or Inkscape and get the same results. In this example, we are drawing a single path with a fill color and a stroke. When the animation comes into play, we will change the size of the stroke to create the illusion of a heartbeat. Below I have included my basic step by step process for drawing a heart in illustrator. 

  1. Start by drawing a large circle that is centered on the artboard. 
  2. Grab the circle's bottom anchor point and remove the curves by shortening the handles to zero. 
  3. Add two additional anchor points to the top of the circle spaced equally from the center. 
  4. Grab the top anchor point and pull it down.
  5. From here, its just a matter of fine tuning the heart graphic to fit your creative vision. 

Structuring the CSS

If you export the SVG graphic and open it in a text editor, you should see some code that looks like HTML or XML. Within this code, look for the <path> that defines the heart. 

<path d="M178.12,12....">

This is our heart. Why not give it its own CSS class to better reflect its name. 

<path class="heart" d="M178.12,12....">

Now you can add the actual styles to this class.

 .heart {  
  fill: red;  
  stroke: maroon;  
  stroke-miterlimit: 10;  
  stroke-width: 20px; 
}

Creating the Animation Keyframes

In CSS, animations are created with Keyframes, which define the sequence of changes in the animation. In our case, we want to change the width of the heart's stroke (or outline) to make it look like a heart beat. The keyframe code to make this happen is very simple, at 0% the stroke will be 0px and at 100% the stroke will be 40px. 

@keyframes heartbeat {
  0% {
    stroke-width: 0px; 
  }
  100% {
    stroke-width: 20px; 
  } 
}

For this animation, it is only necessary to animate the stroke in one direction. As you will see in the next step, we can alternate the direction of each iteration of the animation to make the image look like it pumping in and out.

Defining the CSS Animation Propertites

Now that we have our keyframes defined, the only remaining step is to add the animation properties to heart class. 


.heart {  
  animation: heartbeat;  
  animation-duration: 1s;  
  animation-direction: alternate;  
  animation-iteration-count: infinite;  
  animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); 
}

Here is what each of these animation properties is doing: 

  1. The animation is simply the name of the keyframes we defined in the last step. 
  2. Duration is the amount of time it will take the keyframes to run from 0% to 100%. 
  3. Direction set to alternate will reverse the keyframes after each iteration. Kind of like watching a VHS video and then rewinding it at the same speed. 
  4. The iteration-count specifies how many times the animation will play - infinite makes it loop forever. 
  5. The timing-function defines how the keyframes will progress throughout the animation. In this case, we are defining a cubic-bezier curve to make the animation as lifelike as possible. This curve will ease in and ease out to mimic the general pattern of a human heartbeat. 

The Resulting Heartbeat Animation

Ydfbkpixtb3csjpgl6ip
Here's a GIF version of how your heartbeat animation should look. I can't upload the raw SVG file to CampusHippo, but you can check out the actual SVG here: https://svgnarly.com/products/animated-heart-graphic

Production Ready Animated Heart Graphic by SVGnarly

This Section is Locked!

Unlock this lesson for $5 to view all sections.

Signup and Unlock for $5

Grades

Nobody has graded this lesson yet.

n 0.0%
Technology Graphic Design

  • 0 Unlocks
  • 1148 Total Reads
  • 24 minutes Est. Learning Time
css