<!DOCTYPE html>

<head>

<style>

body{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;overflow:hidden;background:repeating-linear-gradient(45deg,#000 0 20px,#fff 20px 40px)} .shapes-container{display:flex;gap:20px} .heart{width:25px;height:25px;position:relative;animation:5s linear infinite colorChange,.3s ease-in-out infinite alternate scaleUp;background-color:#f00;transform:rotate(-45deg)} .heart:before,.heart:after{content:'';width:25px;height:25px;background-color:inherit;border-radius:50%;position:absolute} .heart:before{top:-12.5px;left:0} .heart:after{top:0;left:12.5px} .heart:hover{transform:scale(1.5);animation:none} @keyframes colorChange{0%,100%{background-color:#f00}25%,50%,75%{background-color:#f00}} @keyframes scaleUp{to{transform:scale(1.5)}} h1{position:fixed;top:60%;left:50%;transform:translate(-50%,-50%);font:48px 'Arial',sans-serif;color:#f00;letter-spacing:2px;white-space:nowrap}

</style>

<title>Red Hearts Animation</title>

</head>

<body>

</div>

</body>

</html>