Advertisement

Create a Beating Heart with Pure HTML and CSS

Hello friends, in this post I am going to tell you two different approaches to create a beating heart with pure HTML and CSS. Both the approaches need minimal coding and works perfectly as it should.

You can use this code in any part of a website as long as you put HTML code and CSS code in corresponding HTML and CSS files. Both the hearts look as shown in the following image.

Create a Beating Heart with Pure HTML and CSS

Beating Heart With Approach 1

In approach 1 I have used a main div element and used before and after pseudo elements to make two circles on the main div as well as made them circular. You can understand this approach in the following image.

Beating Heart With Approach 1

This heart have an animation to beat it continuously, you can use it in single HTML file to check its working or you can use it in your existing webpage by adding HTML part of code in correct HTML file and correct CSS code in correct CSS file.

Code 1 to Create Beating Heart with pure HTML and CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heart Beat</title>
<style type="text/css">
.container{height: 100vh; display: flex;justify-content: center; align-items:                             center;}
.heart{width: 150px; height: 150px; background: #f00;position: relative;                             transform: rotate(45deg); animation: beat 1.2s linear infinite;}
.heart::before{content:''; height: 100%; width: 100%; background: #f00; position:                 absolute; top: -50%; left: 0; border-radius: 50%; transform: rotate(-50deg);}
.heart::after{content:''; height: 100%; width: 100%; background: #f00; position:                     absolute; top: 0; left: -50%; border-radius: 50%; transform: rotate(50deg);}
@keyframes beat {
0%{transform: scale(1.0) rotate(45deg);}
20%{transform: scale(1.2) rotate(45deg);}
40%{transform: scale(1.0) rotate(45deg);}
60%{transform: scale(1.2) rotate(45deg);}
80%{transform: scale(1.0) rotate(45deg);}
100%{transform: scale(1.0) rotate(45deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="heart"></div>
</div>
</body>
</html>

Beating Heart with Approach 2

In approach 2 I used a main div element and made it as color of its background color, so that it becomes invisible. Then I used before and after pseudo elements to create 2 rectangles with their top 2 corners circular and rotated them correctly to form a heart. You can understand this approach in following image.

Beating Heart with Approach 2
In above structural view you can see that there is a main div element in black color and two pseudo elements in red and green color. These pseudo elements are made circular on top and then rotated correctly to form a heart which looks correct after making main div white and both pseudo elements red.

Code to Create Beating Heart with pure HTML and CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heart Beat</title>
<style type="text/css">
.container{height: 100vh; display: flex; justify-content: center; align-items: center;}
.heart{width: 250px; height: 250px; background: #fff;position: relative; animation: beat 1s                     linear infinite;}
.heart::before{content:''; height: 100%; width: 65%; background: red; position: absolute; top:                 0; left: 0; border-radius: 50% 50% 0 0; transform: rotate(-50deg);}
.heart::after{content:''; height: 100%; width: 65%; background: red; position: absolute; top: 0;                 right: 0; border-radius: 50% 50% 0 0; transform: rotate(50deg);}
@keyframes beat {
0%{transform: scale(1.0);}
20%{transform: scale(1.2);}
40%{transform: scale(1.0);}
60%{transform: scale(1.2);}
80%{transform: scale(1.0);}
100%{transform: scale(1.0);}
}
</style>
}
</head>
<body>
<div class="container">
<div class="heart"></div>
</div>
</body>
</html>

This heart have an animation to beat it continuously, you can use it in single HTML file to check its working or you can use it in your existing webpage by adding HTML part of code in correct HTML file and correct CSS code in correct CSS file.

Conclusion: Hope this post helped you to understand ways to create a beating heart with pure HTML and CSS. If you have any issue with this code, you can comment below. Thank you for reading this post.

Post a Comment

0 Comments