.heart__wrapper {
  background: #ed5d52;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: 20px auto;
  position: relative;
}
.heart {
  top: 40%;
  left: 35%;
  width: 30%;
  height: 30%;
  background: white;
  transform: rotate(45deg);
  position: relative;
  border-bottom-right-radius: 5px;
  animation: breathing 5s infinite;
filter: drop-shadow(4px 4px 0 rgba(255, 255, 255, 0.4));
}

.heart:before,
.heart:after {
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 50px;
  position: absolute;

}

.heart:before {
  top: -50%;
}
.heart:after {
  left: -50%;
}

@keyframes breathing {
/*   0% {
    opacity: .4;
  } */
  40% {
    opacity: .9;
    transform: rotate(45deg) scale(1.1);
  }
/*   100% {
    opacity: .4;
  } */
}

document.addEventListener('click', () => {
  document.querySelector('.heart__wrapper').style['background'] = '#' + [1,2,3,4,5,6].map(() => {
    return '1234567890abcdef'[Math.floor(Math.random() * 16)]
  }).join('');
});