Let’s create a Heart Beat Animation using HTML and CSS. This simple yet eye-catching project will feature a glowing heart that beats rhythmically, symbolizing love and life through smooth CSS animations. ❤️
We’ll use:
- HTML to structure the heart shape.
- CSS to style it with colors, shadows, and keyframe animations for the beating effect.
This project is perfect for beginners who want to learn about CSS animations and transitions while creating something fun and visually appealing. Let’s get started and make the heart come alive with a beautiful pulse! 💓
HTML :
This code creates a heart-shaped preloader animation using SVG. It draws the heart outline and veins inside it, then mirrors one side to make it symmetrical. Each part has special classes that are animated with CSS to make the heart look like it’s beating and glowing, with lines (veins) pulsing inside. The <symbol> and <use> tags are used to reuse shapes, and stroke-dasharray helps create the moving line effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heart Beat Animation | @coding.stella</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /><link rel="stylesheet" href="./style.css">
</head>
<body>
<svg class="heart" viewBox="0 0 32 32" width="32px" height="32px" role="img" aria-label="Heart beating with red lines running down the outside and veins inside">
<symbol id="heart-border">
<path d="M 15.9 7.75 C 15.9 7.75 11.639 2.996 6.785 5.85 C 4.652 7.105 2.992 9.667 3 12.5 C 3.017 18.716 7.878 22.041 9.5 23.547 C 14.398 27.547 16.088 27.5 16 27.5" stroke-dasharray="39 39" />
</symbol>
<symbol id="heart-vein1">
<path d="M 11.095 7.744 C 11.095 7.744 9.119 10.295 9.5 12.5 C 9.835 14.441 11.089 14.417 12.929 15.896 C 14.638 17.269 14.431 19.507 14.431 19.507" stroke-dasharray="14.1 39" />
</symbol>
<symbol id="heart-vein2">
<path d="M 9.5 12.5 C 9.5 12.5 9.667 13.781 9.209 14.895 C 8.796 15.901 7.872 16.561 7.872 16.561" stroke-dasharray="4.6 39" />
</symbol>
<symbol id="heart-vein3">
<path d="M 10.2 14 C 12.133 16.433 12.095 18.427 12 19.4 C 11.829 21.153 10.4 22.2 10.4 22.2" stroke-dasharray="9.1 39" />
</symbol>
<symbol id="heart-vein4">
<path d="M 12 19.3 C 12 19.3 12 20.572 12.551 21.726 C 13.012 22.692 13.535 22.974 13.535 22.974" stroke-dasharray="4.1 39" />
</symbol>
<g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
<g opacity="0.25">
<g>
<use class="heart__border heart__border--pulse" href="#heart-border" />
<g class="heart__vein-group">
<use class="heart__vein heart__vein--pulse1" href="#heart-vein1" />
<use class="heart__vein heart__vein--pulse2" href="#heart-vein2" />
<use class="heart__vein heart__vein--pulse3" href="#heart-vein3" />
<use class="heart__vein heart__vein--pulse4" href="#heart-vein4" />
</g>
</g>
<g transform="scale(-1,1)" style="transform-origin:16px 16px">
<use class="heart__border heart__border--pulse" href="#heart-border" />
<g class="heart__vein-group">
<use class="heart__vein heart__vein--pulse1" href="#heart-vein1" />
<use class="heart__vein heart__vein--pulse2" href="#heart-vein2" />
<use class="heart__vein heart__vein--pulse3" href="#heart-vein3" />
<use class="heart__vein heart__vein--pulse4" href="#heart-vein4" />
</g>
</g>
</g>
<g>
<g class="heart__border heart__border--fade">
<g>
<use class="heart__border heart__border--offset-pulse" href="#heart-border" />
</g>
<g transform="scale(-1,1)" style="transform-origin:16px 16px">
<use class="heart__border heart__border--offset-pulse" href="#heart-border" />
</g>
</g>
<g>
<g class="heart__vein-group">
<use class="heart__vein heart__vein--all1" href="#heart-vein1" />
<use class="heart__vein heart__vein--all2" href="#heart-vein2" />
<use class="heart__vein heart__vein--all3" href="#heart-vein3" />
<use class="heart__vein heart__vein--all4" href="#heart-vein4" />
</g>
</g>
<g transform="scale(-1,1)" style="transform-origin:16px 16px">
<g class="heart__vein-group">
<use class="heart__vein heart__vein--all1" href="#heart-vein1" />
<use class="heart__vein heart__vein--all2" href="#heart-vein2" />
<use class="heart__vein heart__vein--all3" href="#heart-vein3" />
<use class="heart__vein heart__vein--all4" href="#heart-vein4" />
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
CSS :
This CSS adds style and animation to the SVG heart. It sets basic styles (removing margins, padding), defines color shades using HSL variables, and centers the heart in the middle of the screen. The .heart class controls the heart’s size and color, while animation classes like .heart__border and .heart__vein make the heart beat and its veins pulse. The @keyframes define how each part moves—scaling, fading, or rotating to create the heartbeat effect. It also supports dark mode, changing background and heart colors when the system theme is dark.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 3;
--primary1: hsl(var(--hue),90%,95%);
--primary2: hsl(var(--hue),90%,60%);
--primary3: hsl(var(--hue),90%,40%);
--primary4: hsl(var(--hue),90%,5%);
--trans-dur: 0.3s;
font-size: clamp(1rem,0.95rem + 0.25vw,1.25rem);
}
body {
background-color: var(--primary1);
color: var(--primary4);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.heart {
color: var(--primary3);
display: block;
margin: auto;
width: 12em;
height: auto;
transition: color var(--trans-dur);
}
.heart__border, .heart__vein, .heart__vein-group {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-iteration-count: infinite;
}
.heart__border {
transform-origin: 16px 16px;
}
.heart__border--fade {
animation-name: heart-border-fade;
}
.heart__border--offset-pulse {
animation-name: heart-border-offset, heart-border-pulse;
}
.heart__border--pulse {
animation-name: heart-border-pulse;
}
.heart__vein-group {
animation-name: heart-vein-group-pulse;
transform-origin: 9.5px 23.5px;
}
.heart__vein--all1, .heart__vein--pulse1 {
transform-origin: 9.5px 12.5px;
}
.heart__vein--all1 {
animation-name: heart-vein-fade1, heart-vein-offset1, heart-vein-pulse1;
}
.heart__vein--pulse1 {
animation-name: heart-vein-pulse1;
}
.heart__vein--all2, .heart__vein--pulse2 {
transform-origin: 9.5px 12.5px;
}
.heart__vein--all2 {
animation-name: heart-vein-fade2, heart-vein-offset2, heart-vein-pulse2;
}
.heart__vein--pulse2 {
animation-name: heart-vein-pulse2;
}
.heart__vein--all3, .heart__vein--pulse3 {
transform-origin: 10.2px 14px;
}
.heart__vein--all3 {
animation-name: heart-vein-fade3, heart-vein-offset3, heart-vein-pulse3;
}
.heart__vein--pulse3 {
animation-name: heart-vein-pulse3;
}
.heart__vein--all4, .heart__vein--pulse4 {
transform-origin: 12px 19.3px;
}
.heart__vein--all4 {
animation-name: heart-vein-fade4, heart-vein-offset4, heart-vein-pulse4;
}
.heart__vein--pulse4 {
animation-name: heart-vein-pulse4;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--primary4);
color: var(--primary1);
}
.heart {
color: var(--primary2);
}
}
/* Animations */
@keyframes heart-border-fade {
from, 98%, to {
opacity: 0;
}
5%, 93% {
opacity: 1;
}
}
@keyframes heart-border-offset {
from {
stroke-dashoffset: 39;
}
50% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -39;
}
}
@keyframes heart-border-pulse {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: scale(1);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: scale(1.125);
}
}
@keyframes heart-vein-group-pulse {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: translate(0, 0) rotate(0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: translate(-2px, -0.5px) rotate(5deg);
}
}
@keyframes heart-vein-fade1 {
from, 89%, to {
opacity: 0;
}
5%, 84% {
opacity: 1;
}
}
@keyframes heart-vein-offset1 {
from {
stroke-dashoffset: 14.1;
}
25%, 50% {
stroke-dashoffset: 0;
}
90%, to {
stroke-dashoffset: -14.1;
}
}
@keyframes heart-vein-pulse1 {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: rotate(0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: rotate(-9deg);
}
}
@keyframes heart-vein-fade2 {
from, 85% {
opacity: 1;
}
90%, to {
opacity: 0;
}
}
@keyframes heart-vein-offset2 {
from, 11% {
stroke-dashoffset: 4.6;
}
36%, 55% {
stroke-dashoffset: 0;
}
95%, to {
stroke-dashoffset: -4.6;
}
}
@keyframes heart-vein-pulse2 {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: rotate(0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: rotate(9deg);
}
}
@keyframes heart-vein-fade3 {
from, 91% {
opacity: 1;
}
96%, to {
opacity: 0;
}
}
@keyframes heart-vein-offset3 {
from, 12% {
stroke-dashoffset: 9.1;
}
37%, 59.5% {
stroke-dashoffset: 0;
}
99.5%, to {
stroke-dashoffset: -9.1;
}
}
@keyframes heart-vein-pulse3 {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: rotate(0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: rotate(1deg);
}
}
@keyframes heart-vein-fade4 {
from, 92% {
opacity: 1;
}
97%, to {
opacity: 0;
}
}
@keyframes heart-vein-offset4 {
from, 25.75% {
stroke-dashoffset: 4.1;
}
50%, 71% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -4.1;
}
}
@keyframes heart-vein-pulse4 {
from, to {
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
transform: rotate(0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
transform: rotate(-18deg);
}
}
In conclusion, creating a Heart Beat Animation using HTML and CSS is a simple and enjoyable way to explore the power of CSS animations. By combining basic shapes, colors, and smooth keyframes, we’ve built a heart that beats with rhythm and emotion 💖
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
