<div id="text-spot">
      <div id="inner-text">
        <svg class="filling-heart" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
          viewBox="0 0 24 24">
          <path
            d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
        </svg>

        <svg class="filling-heart" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
          viewBox="0 0 24 24">
          <path
            d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
        </svg>

        <svg class="filling-heart" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
          viewBox="0 0 24 24">
          <path
            d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
        </svg>

        <svg class="filling-heart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path
            d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
        </svg>

        <svg id="animating-heart" class="animating-heart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path
            d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
        </svg>

        <svg class="unfilled-heart" viewbox="-1 0 26 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
          <path
            d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181" />

          </svg>

          <svg class="unfilled-heart" viewbox="-1 0 26 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path
              d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181" />

          </svg>
          <svg class="unfilled-heart" viewbox="-1 0 26 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path
              d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181" />

          </svg>
          <svg class="unfilled-heart" viewbox="-1 0 26 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path
              d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181" />

          </svg>
        </div>
      </div>

@keyframes scale {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(2);
        }
        100% {
          transform: scale(1);
        }
      }

    body {
      background: white;
    }

      path {
        pointer-events: none;
      }

      .filling-heart, .animating-heart {
        position: absolute;
        transform: scale(1.1);
        z-index: 1;
        fill: #ff0076;
        pointer-events: none;
      }

      .filling-heart {
        opacity: 0;
      }

      .filling-heart.visible {
        opacity: 1;
      }

      .filling-heart:nth-child(1) {
        left: 0;
      }

      .filling-heart:nth-child(2) {
        left: 28px;
      }

      .filling-heart:nth-child(3) {
        left: 56px;
      }

      .filling-heart:nth-child(4) {
        left: 84px;
      }

      .animating-heart.animate {
        animation: scale 500ms ease-in;
      }

      .unfilled-heart {
        cursor: pointer;
        stroke: #ff0076;
      }

      #inner-text {
        position: relative;
        z-index: 1;
      }

      #text-spot {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

 document.addEventListener('DOMContentLoaded', function () {
          var mainHeart = document.getElementById('animating-heart');
          var innerText = document.getElementById('inner-text');
          var fillingHearts = Array.from(document.getElementsByClassName('filling-heart'));

          document.addEventListener('click', function (e) {

            if (Array.from(e.target.classList).includes('unfilled-heart')) {
              mainHeart.classList.remove('animate');
              var rect = e.target.getBoundingClientRect();
              var innerTextRect = innerText.getBoundingClientRect();
              var index = Array.from(e.target.parentNode.children).indexOf(e.target) - 5;
              mainHeart.style.left = (rect.left - innerTextRect.left) + 'px';
              mainHeart.style.top = (rect.top - innerTextRect.top) + 'px';
              mainHeart.classList.add('animate');

              fillingHearts.forEach(function (heart, heartIndex) {
                if (heartIndex <= index) {
                  heart.classList.add('visible');
                } else {
                  heart.classList.remove('visible');
                }
              });
            }
          });
        });