.svg-wrapper
  svg#svg
View Compiled
* {
  margin: 0;
  padding: 0;
}
.svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
View Compiled
const heart1 = 'M129.997 250C-162.496 49.948 129.997 -104.423 129.997 88.203C129.997 -102.344 400.004 49.948 129.997 250Z'
const heart2 = 'M127.376 250.5C-157.974 174.568 127.376 -81.8946 127.376 27.0743C127.376 -78.0226 404.526 180.577 127.376 250.5Z'

const svg = Snap('#svg').attr({
  width: 150,
  height: 150,
  viewBox: '0, 0, 250 250',
  fill: '#D73939'
})
const path = svg.path(heart1)

const anim = (shape, duration, easing) => {
  path.animate({
    path: shape
  }, duration, easing)
}

setInterval(() => {
  anim(heart2, 400, mina.easeout)
  setTimeout(() => {
    anim(heart1, 800, mina.bounce)
  }, 400)
}, 1400)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js