I Miss You Heart Animation Using HTML, CSS & JavaScript - Free Copyable Code

Create a beautiful 'I Miss You' heart animation using HTML, CSS & JavaScript. Get free copyable source code, perfect for Valentine's Day, love messages, or romantic landing pages.

Wednesday, April 9, 2025
I Miss You Heart Animation Using HTML, CSS & JavaScript - Free Copyable Code

 Copy the Code: "I Miss You" Heart Animation Using HTML, CSS & JavaScript

If you're looking to express emotions through code, this project is made just for you! Introducing the "I Miss You" Heart Animation, a beautiful and emotionally engaging canvas-based animation built using pure HTML, CSS, and JavaScript — and the best part? You can copy the full source code directly from this page right here on AlertCampusGenius.com.

Whether you're building a romantic landing page, sending a heartfelt message through a website, or simply experimenting with canvas animations, this project adds a personal and visually stunning touch to your creations.

 What is This Project About?

This project creates an interactive and animated canvas where multiple heart shapes are generated and animated using custom JavaScript logic. The animation gives a floating, glowing effect to hearts as they gently move across the screen, changing colors dynamically and creating a warm, emotional atmosphere. The title "I Miss You " is placed at the top, conveying the purpose of the design instantly.

The animation is rendered through the  element using mathematical functions and Bezier curves to draw heart shapes in real-time. The project includes:

  • Heart shape rendering using Bezier curves

  • Randomized color generation using HSL and RGB models

  • Responsive canvas sizing based on the screen width

  • Smooth animation loop using requestAnimationFrame

  • Dynamic resizing with full compatibility on both desktop and mobile devices

 Project Highlights

 Technology Stack

  • HTML5 – For structuring the canvas and the message

  • CSS3 – For basic styling

  • JavaScript (ES6) – For dynamic heart animation and canvas rendering

 Key Features

  • ✅ Pure HTML, CSS & JavaScript (No frameworks or libraries required)

  • ✅ Responsive layout — works seamlessly on all screen sizes

  • ✅ Customizable heart size and color animation

  • ✅ Lightweight and fast-loading

  • ✅ Perfect for Valentine’s Day, romantic pages, love letters, and more

 How It Works

The animation is controlled by a JavaScript class structure:

  • Tool class handles color and random number generation.

  • Heart class defines the shape and motion of each heart.

  • Canvas class handles rendering and animation using the 2D context of .

    On load, the script initializes hearts and animates them using requestAnimationFrame, giving a glowing and floating effect across the screen.

Every heart has its own position, speed, size, and color — making the display both dynamic and uniquely mesmerizing every time it loads.

 Copy the Full Source Code

You can copy the complete code for this stunning heart animation below. Feel free to use or customize it for your own projects:

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I miss u | Alert Campus genius</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
             <!-- Title -->
  <h1 class="title"><span id="title">I Love You</span></h1>
  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
    margin: 0;
    padding: 0;
}

html, body {
    overflow: hidden;
}

body {
    position: relative;
    background: #000;
}

.title {
    position: absolute;
    color: #fff;
    font-size: 2.5rem;
    text-align: center;
    left: 50%;
    top: 6%;
    transform: translateX(-50%);
    letter-spacing: 19px;
    text-transform: uppercase;
}

JavaScript Code

class Tool {
    static randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    static randomColorRGB() {
        return `rgb(${this.randomNumber(0, 255)}, ${this.randomNumber(0, 255)}, ${this.randomNumber(0, 255)})`;
    }

    static randomColorHSL(hue, saturation, lightness) {
        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    }

    static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {
        const col = `${cr},${cg},${cb}`;
        const g = ctx.createRadialGradient(x, y, 0, x, y, r);
        g.addColorStop(0, `rgba(${col}, ${ca * 1})`);
        g.addColorStop(0.5, `rgba(${col}, ${ca * 0.5})`);
        g.addColorStop(1, `rgba(${col}, ${ca * 0})`);
        return g;
    }
}

class Angle {
    constructor(a) {
        this.a = a;
        this.rad = (this.a * Math.PI) / 180;
    }

    incDec(num) {
        this.a += num;
        this.rad = (this.a * Math.PI) / 180;
    }
}

let canvas;
let offCanvas;

class Canvas {
    constructor(bool) {
        this.canvas = document.createElement("canvas");
        if (bool === true) {
            this.canvas.style.position = "relative";
            this.canvas.style.display = "block";
            this.canvas.style.top = 0;
            this.canvas.style.left = 0;
            document.body.appendChild(this.canvas);
        }
        this.ctx = this.canvas.getContext("2d");
        this.width = this.canvas.width = window.innerWidth;
        this.height = this.canvas.height = window.innerHeight;
        this.width < 768 ? (this.heartSize = 180) : (this.heartSize = 250);
        this.mouseX = null;
        this.mouseY = null;
        this.hearts = [];
        this.offHeartNum = 1;
        this.offHearts = [];
        this.data = null;
    }

    onInit() {
        let index = 0;
        for (let i = 0; i < this.height; i += 12) {
            for (let j = 0; j < this.width; j += 12) {
                let oI = (j + i * this.width) * 4 + 3;
                if (this.data[oI] > 0) {
                    index++;
                    const h = new Heart(canvas.ctx, j + Tool.randomNumber(-3, 3), i + Tool.randomNumber(-3, 3), Tool.randomNumber(6, 12), index);
                    canvas.hearts.push(h);
                }
            }
        }
    }

    offInit() {
        for (let i = 0; i < this.offHeartNum; i++) {
            const s = new Heart(this.ctx, this.width / 2, this.height / 2.3, this.heartSize);
            this.offHearts.push(s);
        }
        for (let i = 0; i < this.offHearts.length; i++) {
            this.offHearts[i].offRender(i);
        }
        this.data = this.ctx.getImageData(0, 0, this.width, this.height).data;
        this.onInit();
    }

    render() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        for (let i = 0; i < this.hearts.length; i++) {
            this.hearts[i].render(i);
        }
    }

    resize() {
        this.offHearts = [];
        this.hearts = [];
        this.width = this.canvas.width = window.innerWidth;
        this.height = this.canvas.height = window.innerHeight;
        this.width < 768 ? (this.heartSize = 180) : (this.heartSize = 250);
    }
}

class Heart {
    constructor(ctx, x, y, r, i) {
        this.ctx = ctx;
        this.init(x, y, r, i);
    }

    init(x, y, r, i) {
        this.x = x;
        this.xi = x;
        this.y = y;
        this.yi = y;
        this.r = r;
        this.i = i * 0.5 + 200;
        this.l = this.i;
        this.c = Tool.randomColorHSL(Tool.randomNumber(-5, 5), 80, 60);
        this.a = new Angle(Tool.randomNumber(0, 360));
        this.v = {
            x: Math.random(),
            y: -Math.random(),
        };
        this.ga = Math.random();
    }

    draw() {
        const ctx = this.ctx;
        ctx.save();
        ctx.globalCompositeOperation = "lighter";
        ctx.globalAlpha = this.ga;
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.moveTo(this.x, this.y + this.r);
        ctx.bezierCurveTo(
            this.x - this.r - this.r / 5,
            this.y + this.r / 1.5,
            this.x - this.r,
            this.y - this.r,
            this.x,
            this.y - this.r / 5
        );
        ctx.bezierCurveTo(
            this.x + this.r,
            this.y - this.r,
            this.x + this.r + this.r / 5,
            this.y + this.r / 1.5,
            this.x,
            this.y + this.r
        );
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    updateParams() {
        this.a.incDec(1);
        Math.sin(this.a.rad) < 0 ? (this.r = -Math.sin(this.a.rad) * 20) : (this.r = Math.sin(this.a.rad) * 20);
    }

    updatePosition() {
        this.l -= 1;
        if (this.l < 0) {
            this.v.y -= 0.01;
            this.v.x += 0.02;
            this.y += this.v.y;
            this.x += this.v.x;
        }
    }

    wrapPosition() {
        if (this.x > canvas.width * 1.5) {
            this.init(this.xi, this.yi, Tool.randomNumber(6, 12), this.i);
        }
    }

    render() {
        this.wrapPosition();
        this.updateParams();
        this.updatePosition();
        this.draw();
    }

    offRender(i) {
        this.draw();
    }
}

(function () {
    "use strict";
    window.addEventListener("load", function () {
        offCanvas = new Canvas(false);
        canvas = new Canvas(true);

        offCanvas.offInit();

        function render() {
            window.requestAnimationFrame(function () {
                canvas.render();
                render();
            });
        }

        render();

        window.addEventListener(
            "resize",
            function () {
                canvas.resize();
                offCanvas.resize();
                offCanvas.offInit();
            },
            false
        );
    });
})();

PHP Code

NO Need
Show Result

 Where You Can Use This?


  •  Romantic landing pages or messages

  •  Valentine's Day themed websites

  •  JavaScript and canvas animation practice for students

  •  Creative personal portfolios

  • ✨ Emotional messages on blogs or love letters

This heart animation is a simple yet powerful example of how you can use JavaScript and HTML5 Canvas to express emotions visually on a webpage. It's a great learning resource for beginners and an eye-catching feature for professionals.

At AlertCampusGenius.com, we believe that code can be creative. That’s why we offer free, high-quality source code for developers, students, and hobbyists.


✅ FAQ Section:

 Frequently Asked Questions

1. How do I create a heart animation using HTML, CSS, and JavaScript?
This blog provides a complete guide with source code to create a heart animation using canvas and pure HTML, CSS, and JavaScript. You can copy and customize it freely.

2. Is the heart animation mobile responsive?
Yes, the heart animation is fully responsive and works on all screen sizes including mobile and tablets.

3. Can I use this heart animation for a Valentine's Day website?
Absolutely! This "I Miss You" animation is perfect for Valentine’s Day, love messages, or romantic-themed web pages.

4. Is this animation using any JavaScript library like jQuery?
No, this animation is created using pure JavaScript without any external libraries.

5. Can I modify the heart size, color, or speed?
Yes, the code is fully customizable. You can change heart size, speed, and color animation easily in the JavaScript section.

✅ Comment Prompt:

 Share Your Thoughts
Did you like the heart animation? Want to see more romantic or interactive designs? Drop your feedback below! 
Your comment helps improve this website and boosts content discovery on Google!






Leave a Comment: 👇