HTMLCSSJavaScript

Heart Animation

A visually stunning heart animation project built with Three.js and GSAP. The animation converts an SVG heart shape into thousands of animated particles and renders them in a 3D environment with smooth motion effects. Orbit Controls allow interactive camera movement, while GSAP powers dynamic particle transitions and continuous floating animations. The project demonstrates creative frontend animation techniques using WebGL, particle systems, and SVG path manipulation.

Source Code

3 files

index.html

<!DOCTYPE html>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><html color:#fbbf24">langcolor:#94a3b8">="en" >
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><head>
  color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">charsetcolor:#94a3b8">="UTF-8">
  color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><title>Heart Animation | @EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></title>
  color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">namecolor:#94a3b8">="viewport" color:#fbbf24">contentcolor:#94a3b8">="width=device-width, "color:#fbbf24">initial-scale"color:#94a3b8">=1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><link color:#fbbf24">relcolor:#94a3b8">="stylesheet" color:#fbbf24">hrefcolor:#94a3b8">="./style.css">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><body>

color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><svg color:#fbbf24">viewBoxcolor:#94a3b8">="0 0 600 552">
  color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><path color:#fbbf24">dcolor:#94a3b8">="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" color:#fbbf24">fillcolor:#94a3b8">="#ee5282"/>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></svg>

color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">='https://cdn.jsdelivr.net/npm/three@0.136.0/build/three.min.js'>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">='https://cdn.jsdelivr.net/npm/three@0.136.0/examples/js/controls/OrbitControls.js'>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">='https://unpkg.co/gsap@3/dist/gsap.min.js'>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script  color:#fbbf24">srccolor:#94a3b8">="./script.js">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>

color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></html>

Back to Projects Open Live Project

Heart Animation

Source Code

Join 10,000+ students already learning for free on EduCrush