Heart Beat Animation

This component showcases a heart beat animation using SVG and CSS.
The heart pulses with animated borders and veins to create a lively, realistic heartbeat effect.

🔹 Features

>

📦 Usage

HTML

The heart animation uses a scalable vector graphic (SVG) as the main container. Inside, there are multiple reusable shapes defined as symbols. One symbol represents the heart’s outer border, and four additional symbols represent inner veins. The elements are grouped into layers: the outer border with a faint pulse effect and the inner veins with animated flow. The SVG also includes accessibility labels describing the heart and its movement for screen readers.

CSS Code

Copy
1* {
2  border: 0;
3  box-sizing: border-box;
4  margin: 0;
5  padding: 0;
6}
7
8:root {
9  --hue: 3;
10  --primary1: hsl(var(--hue),90%,95%);
11  --primary2: hsl(var(--hue),90%,60%);
12  --primary3: hsl(var(--hue),90%,40%);
13  --primary4: hsl(var(--hue),90%,5%);
14  --trans-dur: 0.3s;
15  font-size: clamp(1rem,0.95rem + 0.25vw,1.25rem);
16}
17
18body {
19  background-color: var(--primary1);
20  color: var(--primary4);
21  display: flex;
22  font: 1em/1.5 sans-serif;
23  height: 100vh;
24  transition: background-color var(--trans-dur), color var(--trans-dur);
25}
26
27.heart {
28  color: var(--primary3);
29  display: block;
30  margin: auto;
31  width: 12em;
32  height: auto;
33  transition: color var(--trans-dur);
34}
35.heart__border, .heart__vein, .heart__vein-group {
36  animation-duration: 1s;
37  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
38  animation-iteration-count: infinite;
39}
40.heart__border {
41  transform-origin: 16px 16px;
42}
43.heart__border--fade {
44  animation-name: heart-border-fade;
45}
46.heart__border--offset-pulse {
47  animation-name: heart-border-offset, heart-border-pulse;
48}
49.heart__border--pulse {
50  animation-name: heart-border-pulse;
51}
52.heart__vein-group {
53  animation-name: heart-vein-group-pulse;
54  transform-origin: 9.5px 23.5px;
55}
56.heart__vein--all1, .heart__vein--pulse1 {
57  transform-origin: 9.5px 12.5px;
58}
59.heart__vein--all1 {
60  animation-name: heart-vein-fade1, heart-vein-offset1, heart-vein-pulse1;
61}
62.heart__vein--pulse1 {
63  animation-name: heart-vein-pulse1;
64}
65.heart__vein--all2, .heart__vein--pulse2 {
66  transform-origin: 9.5px 12.5px;
67}
68.heart__vein--all2 {
69  animation-name: heart-vein-fade2, heart-vein-offset2, heart-vein-pulse2;
70}
71.heart__vein--pulse2 {
72  animation-name: heart-vein-pulse2;
73}
74.heart__vein--all3, .heart__vein--pulse3 {
75  transform-origin: 10.2px 14px;
76}
77.heart__vein--all3 {
78  animation-name: heart-vein-fade3, heart-vein-offset3, heart-vein-pulse3;
79}
80.heart__vein--pulse3 {
81  animation-name: heart-vein-pulse3;
82}
83.heart__vein--all4, .heart__vein--pulse4 {
84  transform-origin: 12px 19.3px;
85}
86.heart__vein--all4 {
87  animation-name: heart-vein-fade4, heart-vein-offset4, heart-vein-pulse4;
88}
89.heart__vein--pulse4 {
90  animation-name: heart-vein-pulse4;
91}
92
93/* Dark theme */
94@media (prefers-color-scheme: dark) {
95  body {
96    background-color: var(--primary4);
97    color: var(--primary1);
98  }
99
100  .heart {
101    color: var(--primary2);
102  }
103}
104/* Animations */
105@keyframes heart-border-fade {
106  from, 98%, to {
107    opacity: 0;
108  }
109  5%, 93% {
110    opacity: 1;
111  }
112}
113@keyframes heart-border-offset {
114  from {
115    stroke-dashoffset: 39;
116  }
117  50% {
118    stroke-dashoffset: 0;
119  }
120  to {
121    stroke-dashoffset: -39;
122  }
123}
124@keyframes heart-border-pulse {
125  from, to {
126    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
127    transform: scale(1);
128  }
129  50% {
130    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
131    transform: scale(1.125);
132  }
133}
134@keyframes heart-vein-group-pulse {
135  from, to {
136    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
137    transform: translate(0, 0) rotate(0);
138  }
139  50% {
140    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
141    transform: translate(-2px, -0.5px) rotate(5deg);
142  }
143}
144@keyframes heart-vein-fade1 {
145  from, 89%, to {
146    opacity: 0;
147  }
148  5%, 84% {
149    opacity: 1;
150  }
151}
152@keyframes heart-vein-offset1 {
153  from {
154    stroke-dashoffset: 14.1;
155  }
156  25%, 50% {
157    stroke-dashoffset: 0;
158  }
159  90%, to {
160    stroke-dashoffset: -14.1;
161  }
162}
163@keyframes heart-vein-pulse1 {
164  from, to {
165    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
166    transform: rotate(0);
167  }
168  50% {
169    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
170    transform: rotate(-9deg);
171  }
172}
173@keyframes heart-vein-fade2 {
174  from, 85% {
175    opacity: 1;
176  }
177  90%, to {
178    opacity: 0;
179  }
180}
181@keyframes heart-vein-offset2 {
182  from, 11% {
183    stroke-dashoffset: 4.6;
184  }
185  36%, 55% {
186    stroke-dashoffset: 0;
187  }
188  95%, to {
189    stroke-dashoffset: -4.6;
190  }
191}
192@keyframes heart-vein-pulse2 {
193  from, to {
194    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
195    transform: rotate(0);
196  }
197  50% {
198    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
199    transform: rotate(9deg);
200  }
201}
202@keyframes heart-vein-fade3 {
203  from, 91% {
204    opacity: 1;
205  }
206  96%, to {
207    opacity: 0;
208  }
209}
210@keyframes heart-vein-offset3 {
211  from, 12% {
212    stroke-dashoffset: 9.1;
213  }
214  37%, 59.5% {
215    stroke-dashoffset: 0;
216  }
217  99.5%, to {
218    stroke-dashoffset: -9.1;
219  }
220}
221@keyframes heart-vein-pulse3 {
222  from, to {
223    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
224    transform: rotate(0);
225  }
226  50% {
227    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
228    transform: rotate(1deg);
229  }
230}
231@keyframes heart-vein-fade4 {
232  from, 92% {
233    opacity: 1;
234  }
235  97%, to {
236    opacity: 0;
237  }
238}
239@keyframes heart-vein-offset4 {
240  from, 25.75% {
241    stroke-dashoffset: 4.1;
242  }
243  50%, 71% {
244    stroke-dashoffset: 0;
245  }
246  to {
247    stroke-dashoffset: -4.1;
248  }
249}
250@keyframes heart-vein-pulse4 {
251  from, to {
252    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
253    transform: rotate(0);
254  }
255  50% {
256    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
257    transform: rotate(-18deg);
258  }
259}
260

1 CSS Basics

2 Heart Styles

3 Border and Vein Animations

4 Dark Mode Support

5 How the Animation Works Together