Close Menu
    JavaScript

    How to create Heart Animation using HTML CSS and JS

    Coding StellaBy Updated:No Comments4 Mins Read

    Let’s create a Heart Animation using HTML, CSS, and JavaScript! ❤️ This project is perfect for adding a cute and interactive touch to your website, whether for Valentine’s Day or just for fun.

    We’ll use:

    • HTML to structure the heart shape.
    • CSS to style the heart and add smooth pulsing or floating animations.
    • JavaScript (optional) to add extra effects like clicking to create more hearts or triggering animations on events.

    Whether you’re a beginner or want to practice adding interactive elements, this project is a simple and creative way to learn.

    HTML :

    This HTML file sets up a full-screen heart animation using Three.js and GSAP: it includes a hidden SVG heart path that defines particle positions, links the required CSS and JavaScript files, loads Three.js, OrbitControls, and GSAP libraries, and initializes everything through the linked script.js file.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Heart Animation | @coding.stella</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>

<svg viewBox="0 0 600 552">
  <path d="M300,107.77C284.68,55.67,239.76,0,162.31,0,64.83,0,0,82.08,0,171.71c0,.48,0,.95,0,1.43-.52,19.5,0,217.94,299.87,379.69v0l0,0,.05,0,0,0,0,0v0C600,391.08,600.48,192.64,600,173.14c0-.48,0-.95,0-1.43C600,82.08,535.17,0,437.69,0,360.24,0,315.32,55.67,300,107.77" fill="#ee5282"/>
</svg>

<script src='https://cdn.jsdelivr.net/npm/three@0.136.0/build/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three@0.136.0/examples/js/controls/OrbitControls.js'></script>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>

</body>
</html>

    CSS :

    This CSS removes body margins and scrollbars, positions controls and canvas elements absolutely for full-screen layout, hides the SVG used for particle paths, and ensures everything layers correctly using z-index and positioning.

    body {
  margin: 0;
  overflow: hidden;
}

.controls {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

canvas {
  position: absolute;
}

svg {
  position: absolute;
  display: none;
}

    JavaScript:

    This code creates an animated 3D particle heart using Three.js and GSAP; it places particles along an SVG path, randomly offsets them in 3D space, then animates them moving in and out from the center while the whole scene slowly rotates, and resizes dynamically with the browser window.

    console.clear();

/* SETUP */
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  5000
);
camera.position.z = 500;

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/* CONTROLS */
const controlsWebGL = new THREE.OrbitControls(camera, renderer.domElement);

/* PARTICLES */
// Create a global gsap timeline that contains all tweens
const tl = gsap.timeline({
  repeat: -1,
  yoyo: true
});

const path = document.querySelector("path");
const length = path.getTotalLength();
const vertices = [];
for (let i = 0; i < length; i += 0.1) {
  const point = path.getPointAtLength(i);
  const vector = new THREE.Vector3(point.x, -point.y, 0);
  vector.x += (Math.random() - 0.5) * 30;
  vector.y += (Math.random() - 0.5) * 30;
  vector.z += (Math.random() - 0.5) * 70;
  vertices.push(vector);
  // Create a tween for that vector
  tl.from(vector, {
      x: 600 / 2, // Center X of the heart
      y: -552 / 2, // Center Y of the heart
      z: 0, // Center of the scene
      ease: "power2.inOut",
      duration: "random(2, 5)" // Random duration
    },
    i * 0.002 // Delay calculated from the distance along the path
  );
}
const geometry = new THREE.BufferGeometry().setFromPoints(vertices);
const material = new THREE.PointsMaterial( { color: 0xee5282, blending: THREE.AdditiveBlending, size: 3 } );
const particles = new THREE.Points(geometry, material);
// Offset the particles in the scene based on the viewbox values
particles.position.x -= 600 / 2;
particles.position.y += 552 / 2;
scene.add(particles);

gsap.fromTo(scene.rotation, {
  y: -0.2
}, {
  y: 0.2,
  repeat: -1,
  yoyo: true,
  ease: 'power2.inOut',
  duration: 3
});

/* RENDERING */
function render() {
  requestAnimationFrame(render);
  // Update the geometry from the animated vertices
  geometry.setFromPoints(vertices);
  renderer.render(scene, camera);
}

/* EVENTS */
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener("resize", onWindowResize, false);

requestAnimationFrame(render);

    In short, creating a Heart Animation with HTML, CSS, and JavaScript is an easy and fun way to bring websites to life with a sweet visual effect. It’s great for learning basic animations and adding interactive touches to your designs. Let’s keep exploring and making web pages more lively and engaging! ❤️

    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!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply