Heart Animation

This project takes a single mathematical idea and turns it into something you can actually see move on screen. Instead of loading an image of a heart, the code calculates thousands of coordinates using a trigonometric formula and plots them as individual glowing particles. Each particle chases a target point on the heart shape. Because each particle moves at its own speed, they never arrive all at once. That delay is what creates the soft trailing glow that makes the animation feel alive.The beating effect comes from a cosine function that runs in the background. It continuously scales the heart slightly larger and slightly smaller. Your eye reads that rhythmic size change as a heartbeat. The canvas is never fully cleared between frames either. Each new frame paints a slightly transparent black layer over the previous one. Old particle positions fade out slowly instead of disappearing instantly.

That one trick is responsible for the smoke-like trails you see behind every particle.The project is also responsive. It checks the screen size before anything starts and adjusts both the number of particles and the scale of the heart accordingly. Mobile devices get fewer particles to keep performance smooth. Desktop screens get the full density.

You will learn how the HTML5 Canvas API works from scratch. Drawing to a canvas is nothing like manipulating the DOM. There are no elements to select or styles to apply. You simply clear a rectangle and redraw everything from coordinates on every single frame. You will understand how parametric equations work in a visual context. The heart formula takes a single angle value and returns an X and Y coordinate. By running that formula hundreds of times across different angle values you trace out the full shape. That same approach works for circles, spirals and many other curves.You will get a solid understanding of how particle systems behave. Each particle in this project is just a plain JavaScript object with a position, a velocity and a color. The magic is not in any single particle. It comes from hundreds of them moving independently but all targeting the same shape. You will also see how requestAnimationFrame creates smooth animation. It ties your loop to the browser's own rendering cycle so frames stay consistent and the animation never tears or stutters.

Finally you will understand how HSLA color values work. The particles use randomized hue, saturation and lightness values with a low alpha. That low alpha is what makes them look like embers instead of solid dots.