JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="130.3" height="106.7">
  <rect width="100%" height="100%" fill="none" />
  <g class="currentLayer">
    <title>
      Layer 1
    </title>
    <path d="M0 33C-1.3 16 10.6 2 27.5.3 38.8-.6 49 5 55.8 13.6l16.6 22.6L51 52.8 73 71 64 104.7C42 87.7 3 65.7 0 33z" fill="#ff0404" class="heart-left" />
    <path d="M101 0C89.4-1 79.2 4.7 72.4 13.4L85 38.5l-16 8.2-4 2-4 2.3c0 .2 1.4 2 3.3 4.4l3.5 4 11.6 13.7-15 31.4c21.8-17 61-39 63.7-71.8 1.6-17-10.2-31-27-32.5z" fill="#ff0404" class="heart-right" />
    <path d="M-4.2 223.8c-35 35.7-84 17.3-104.3-4-21-21.7-33.4-74.4-2.4-102.7l246.2-246c34.8-34.7 82-10.6 98.5 5.7 21.5 21.5 38.2 67.3 8.2 101l-246.2 246z" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill-rule="evenodd" fill="#ffd4aa"
    style="transform: scale(0.15) rotate(45deg); transform-origin:50% 50%" class="bandaid" />
  </g>
</svg>

JavaScript

var svg = document.querySelector('svg');
var heartLeft = svg.querySelector('.heart-left');
var heartRight = svg.querySelector('.heart-right');
var bandaid = svg.querySelector('.bandaid');
animate();

function animate() {
// return;
  var hl = anime({
    targets: heartLeft,
    translateX: -10,
    duration: 20000,
    easing: 'linear',
  })
  var hr = anime({
    targets: heartRight,
    translateX: 10,
    duration: 5000,
    easing: 'linear',
  })
  
  var b = anime({
  	targets: bandaid,
    scale: [0.15, 0.16],
    rotate: 45,
    duration: 5000,
    easing: 'linear',
  })
  
  setTimeout(function() {
  	hl.pause();
    hr.pause();
    b.pause();
  	anime({
    	targets: [heartLeft, heartRight],
      translateX: 0,
      duration: 750
    })
    anime({
    	targets: bandaid,
      scale: 0.15,
      rotate: 45,
      duration: 750
    })
  }, 5000);
}