Creating heartbeat and heart animations

In today’s tutorial, we’ll learn how to create a lovely and eye-catching heartbeat animation that you can use on your website — especially in sections related to love, couple email opt-ins, or any romantic-themed design. It’s a simple and elegant effect that adds emotion and interaction to your site.

The best part? You don’t need any coding knowledge to create this animation!

Why Use a Heartbeat Animation?

Animations like this can make your site feel more alive and engaging. Whether you’re building a wedding website, a Valentine’s Day landing page, or a romantic blog, a heartbeat animation adds just the right touch of charm and motion.

How to Add the Heartbeat Animation

You can add this heartbeat animation anywhere on your site by following these three simple steps:

Step 1: Copy the HTML

Just copy and paste the HTML below wherever you want the animation to appear on your webpage.

Step 2: Copy the CSS

Now copy and paste the CSS into your site’s stylesheet or inside a <style> tag in the header.

Step 3: Done! Watch the Animation

That’s it! Your beautiful heartbeat animation is now live on your site.

If you want a clearer understanding, check out the video tutorial included with this post — it walks you through the process step-by-step.

HTML

CSS

svg {
overflow: visible;
}
path#line {
fill: none;
stroke: #e00000;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 4s linear forwards infinite;
}
path#heart {
fill: red;
transform-origin: 50% 50%;
animation: blink 4s ease-in-out infinite;
}
@keyframes drawLine {
0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; }
}
@keyframes blink {
0%, 60% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.3); } 75% { transform: scale(1); } 85% { transform: scale(1.2); } 100% { opacity: 0; transform: scale(0); }
}