Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025

    How to create 3D Animated Bee website using HTML CSS and JS

    28 April 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Heart Rate Animation Part 1 using HTML & CSS
    HTML & CSS

    How to make Heart Rate Animation Part 1 using HTML & CSS

    Coding StellaBy Coding Stella6 May 2024Updated:10 February 2025No Comments3 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s start with Part 1 of creating a Heart Rate Animation using HTML and CSS. This part will focus on setting up the basic structure and styling for the animation. For Part 2 Click Here

    We’ll keep it simple yet visually appealing, using HTML to create the structure of the animation and CSS to style it.

    Let’s dive in and begin crafting the Heart Rate Animation Part 1. Whether you’re new to web development or looking to enhance your skills, this project will be a great opportunity to learn and create something beautiful!

    HTML :

    This HTML document creates a webpage featuring an animated heart rate line. It includes an SVG element with two groups of paths. One path represents the heart rate line, while the other represents a point on the line. The line animates across the screen, while the point has a blur effect applied to it.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title> šŸ’– Heart Rate line animation </title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <svg xmlns="http://www.w3.org/2000/svg" id="svg5" version="1.1" viewBox="-5 -5 278 56">
      <filter id="blur">
       <feGaussianBlur stdDeviation="1.6" />
    </filter>
      <g id="layer1" transform="translate(29.1 -127.42)">
        <path id="line" d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36" pathLength="1" />
      </g>
      <g id="layer2" transform="translate(29.1 -127.42)">
        <path filter="url(#blur)" id="point" d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36" pathLength="1" />
      </g>
    </svg>
    <!-- partial -->
      
    </body>
    </html>
    

    CSS :

    This CSS code is used to style an animated heart rate line on a webpage. It ensures the content is centered both horizontally and vertically within the viewport. The heart rate line is defined within an SVG element and styled with a red stroke. It animates using a dash effect, moving along its path for 3 seconds in a linear motion, repeating infinitely. Additionally, a point on the line is styled with a thicker red stroke and a blur effect, synchronized with the animation of the line.

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg #line {
      fill: none;
      stroke: #e00000;
      stroke-width: 1.5;
      stroke-linecap: butt;
      stroke-linejoin: round;
      stroke-miterlimit: 4;
    
      stroke-opacity: 1;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: dash 3s linear infinite;
    }
    svg #point {
      fill: none;
      stroke: #f00000;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: .1;
      stroke-opacity: 1;
      stroke-dasharray: .0001, .9999;
      stroke-dashoffset: 1;
      animation: dash 3s linear infinite;
    }
    
    @keyframes dash {
      0% {
        stroke-dashoffset: 1;
      }
      80% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

    In short, creating Part 1 of the Heart Rate Animation using HTML and CSS has laid the foundation for an engaging visual experience. By setting up the structure and styling, we’ve established the groundwork for the animation’s design. Whether you’re a beginner or an experienced developer, this project offers a great opportunity to learn and experiment with creative web design techniques.

    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!

    heart rate valentine
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Heart Rate Animation Part 2 using HTML & CSS
    Next Article How to make 3D wave animation using HTML & CSS
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025
    HTML & CSS

    How to make Cool Loading Animation using HTML & CSS

    18 April 2025
    HTML & CSS

    How to make Magic Social Share Menu using HTML CSS and JS

    14 April 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Animated Bouncy Clock in HTML CSS & JavaScript

    24 March 2025

    How to makeĀ Music Player with Slider | Swiper JS using HTML CSS & JavaScript

    21 May 2024

    How to make Heart Rate Animation Part 1 using HTML & CSS

    6 May 2024

    How to create Valentine’s Day Letter using HTML CSS & JavaScript

    14 February 2025
    Latest Post

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025

    How to create 3D Animated Bee website using HTML CSS and JS

    28 April 2025

    How to create Animated File Upload Modal using JavaScript

    23 April 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with šŸ’™ by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood