Topic today is show you how to draw heart rate with HTML, CSS in 2 minutes
✋✋✋✋✋ Hello everyone, Welcome to Learn Tech Tips Blog Spot, I am Zidane, ✋✋✋✋✋
You can access my tiktok channel to check the demo
@learntechtips Learn draw Heart Rate with HTML, CSS in 2 minutes #learntechtips #learntechtipszidane #csstips #htmlcss ♬ It will be fine, my heart will heal(1227058) - syummacha
Full source code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Rate</title>
<style>
/* heart rate */
@keyframes heartRateIn {
0% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 0;
}
}
@keyframes heartRateOut {
0% {
left: -120%;
}
30% {
left: -120%;
}
100% {
left: 0;
}
}
.heart-rate {
width: 150px;
height: 73px;
position: relative;
margin: 20px auto;
}
.fade-in {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
animation: heartRateIn 2.5s linear infinite;
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}
.fade-out {
position: absolute;
width: 120%;
height: 100%;
top: 0;
left: -120%;
animation: heartRateOut 2.5s linear infinite;
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}
/* box */
.box {
color: rgb(204, 199, 199);
border: 1px solid rgb(204, 199, 199);
box-shadow: 5px 5px rgb(204, 199, 199);
width: 600px;
display: flex;
justify-content: center;
align-self: center;
}
.header {
font-size: 28px;
margin: 30px 0;
}
.title {
color: blue;
}
.red {
color: red !important;
}
</style>
</head>
<body>
<div>
<div class="header">
<div class="title"> Welcome to Webzone tech tips - I am Zidane </div>
<div>
<ul>
<li> <a href="https://learn-tech-tips.blogspot.com/"> https://learn-tech-tips.blogspot.com/</a> </li>
<li> Topic today is: <span class="red"> Heart Rate Line </span> </li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="heart-rate">
<svg id="line" version="1.0" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
<polyline fill="none" stroke="#FF0000" stroke-width="3"stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486" />
</svg>
<div class="fade-in"></div>
<div class="fade-out"></div>
</div>
</div>
</body>
</html>
Here is my another channel welcome to checkin up
You can check source code on my above video, is it easy to use? Love you all :)
Thanks
for reading.
Any feedback and questions about How to use HTML, CSS Draw Heart Rate. Leave your comment on below post, we can discuss about it.
✋✋✋✋ Learn Tech Tips - I am Zidane, See you next time
