<h1><a href="https://www.flaticon.com/free-animated-icon/heart_8121302">Animated heart icon</a> using svg and css</h1>

<div>  
  <svg
    class="big-heart"
    width="80px"
    height="80px"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12 21.67C11.8785 21.6733 11.758 21.6458 11.65 21.59C11.34 21.42 3.93001 17.49 2.38001 12.19C1.49001 9.19 1.79001 6.26 3.18001 4.4C3.68804 3.72873 4.35061 3.19002 5.11141 2.82964C5.87222 2.46926 6.70878 2.29786 7.55001 2.33C8.45302 2.28577 9.35012 2.49801 10.1376 2.94218C10.9251 3.38634 11.5707 4.04431 12 4.84C12.4293 4.04431 13.075 3.38634 13.8624 2.94218C14.6499 2.49801 15.547 2.28577 16.45 2.33C17.2912 2.29786 18.1278 2.46926 18.8886 2.82964C19.6494 3.19002 20.312 3.72873 20.82 4.4C22.21 6.26 22.51 9.17 21.62 12.19C20.07 17.49 12.62 21.42 12.35 21.59C12.242 21.6458 12.1216 21.6733 12 21.67Z"
      stroke="pink"
      stroke-width="8%"
      fill="white"
    />
  </svg>

  <svg
    class="small-heart-left"
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12 21.67C11.8785 21.6733 11.758 21.6458 11.65 21.59C11.34 21.42 3.93001 17.49 2.38001 12.19C1.49001 9.19 1.79001 6.26 3.18001 4.4C3.68804 3.72873 4.35061 3.19002 5.11141 2.82964C5.87222 2.46926 6.70878 2.29786 7.55001 2.33C8.45302 2.28577 9.35012 2.49801 10.1376 2.94218C10.9251 3.38634 11.5707 4.04431 12 4.84C12.4293 4.04431 13.075 3.38634 13.8624 2.94218C14.6499 2.49801 15.547 2.28577 16.45 2.33C17.2912 2.29786 18.1278 2.46926 18.8886 2.82964C19.6494 3.19002 20.312 3.72873 20.82 4.4C22.21 6.26 22.51 9.17 21.62 12.19C20.07 17.49 12.62 21.42 12.35 21.59C12.242 21.6458 12.1216 21.6733 12 21.67Z"
      stroke="#FF8DA1"
      fill="white"
      stroke-width="12%"
    />
  </svg>

  <svg
    class="small-heart-right"
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12 21.67C11.8785 21.6733 11.758 21.6458 11.65 21.59C11.34 21.42 3.93001 17.49 2.38001 12.19C1.49001 9.19 1.79001 6.26 3.18001 4.4C3.68804 3.72873 4.35061 3.19002 5.11141 2.82964C5.87222 2.46926 6.70878 2.29786 7.55001 2.33C8.45302 2.28577 9.35012 2.49801 10.1376 2.94218C10.9251 3.38634 11.5707 4.04431 12 4.84C12.4293 4.04431 13.075 3.38634 13.8624 2.94218C14.6499 2.49801 15.547 2.28577 16.45 2.33C17.2912 2.29786 18.1278 2.46926 18.8886 2.82964C19.6494 3.19002 20.312 3.72873 20.82 4.4C22.21 6.26 22.51 9.17 21.62 12.19C20.07 17.49 12.62 21.42 12.35 21.59C12.242 21.6458 12.1216 21.6733 12 21.67Z"
      stroke="#FF8DA1"
      fill="white"
      stroke-width="12%"
    />
  </svg>

</div>

html, body {height: 100%;}

body{
  display: flex;  
  flex-direction: column;
  padding-left: 20px;
}

h1{
  font-family: Trebuchet MS;
  color: pink;
}

a:link {
  color: pink; 
  background-color: transparent; 
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a:visited {
  color: #FF8DA1;
  background-color: transparent;
  text-decoration: none;
}

div{
  position: relative;
}

.big-heart {
  position: absolute;
  top: 0;
  left: 0;
  animation: center-animate 1.2s ease-in infinite running;
}

.small-heart-left {
  position: absolute;
  top: 55px;
  left: 5px;
  animation: left-animate 1.2s linear infinite;
}

.small-heart-right {
  position: absolute;
  top: 55px;
  left: 50px;
  animation: right-animate 1.2s linear infinite;
}


@keyframes center-animate {
    0% { transform: scale(1) }
    14% { transform: scale(0.75) }
    28% { transform: scale(1) }
    28% { transform: scale(1) }
    42% { transform: scale(0.75) }
    57% { transform: scale(1) }
    100% { transform: scale(1) }
}

@keyframes left-animate {
  0% { transform: translateY(0px); }
  24% { transform: translateY(-30px); opacity: 50;}
  40% { transform: translateY(-40px); opacity: 30;}
  60% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 0; }
}

@keyframes right-animate {
  0% { transform: translateY(0px); opacity: 0;}
  36% { transform: translateY(0px); opacity: 0;}
  40% { transform: translateY(0px); opacity: 100;}
  52% { transform: translateY(-30px); opacity: 50;}
  68% { transform: translateY(-40px); opacity: 30;}
  88% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 0; }
}