Heart Animation ❤️

This Heart Animation project uses a single HTML page with linked CSS and JavaScript. On mousemove, a heart element is created at the cursor position with a random size. The CSS animates each heart moving upward with a hue-rotate effect, then it is removed after a few seconds. The heart image is loaded from an external icon URL; you can replace it with your own image.

All files sit in one folder: heart/ — index.html, style.css, and index.js.

📄 Complete HTML Code

Copy this into index.html in your heart/ folder.

Loading code...

🎨 Complete CSS Code

Copy this into style.css. It styles the full-screen black background and the heart animation.

Loading code...

⚡ Complete JavaScript Code

Copy this into index.js. Listens for mousemove and creates heart elements at the cursor.

Loading code...

📁 Project Assets

Keep the assets in this structure so all paths work:

pages/
├── assets/
│   └── heart/
│       ├── index.html
│       ├── style.css
│       └── index.js

• All files in one folder: heart/
• Hearts use an external icon URL in CSS; you can replace with a local image path

Key Features

• ❤️ Heart trail that follows mouse movement
• 🌈 Hue-rotate animation as hearts float up
• 📐 Random heart size for each spawn
• 🧹 Elements removed after animation to avoid memory bloat
• 📱 Works on desktop (mouse); touch devices can be extended

Customization Tips

• Heart image: Change the url(...) in style.css to your own image
• Speed/height: Adjust translate(-50%, -5000%) and 6s in the CSS animation
• Size: Change Math.random() * 100 in index.js for heart size range