*{
  margin: 0;
  padding: 0;
}

body{
  background: #8C84FE;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.container{
  position: relative;
}

.heart{
  width: 80px;
  height: 80px;
  background: #ef4234;
  transform: rotate(45deg);
  transition: 0.5s linear;
  animation: pulse 4s linear infinite;
}

.heart:before,
.heart:after{
  content:"";
  position: absolute;
  background: #ef4234;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.heart:before{
  top: 0;
  left: -40px;
}

.heart:after{
  top: -40px;
  left: 0;
}

.container:before{
  content: "";
  position: absolute;
  top: 95px;
  left: -20px;
  width: 125px;
  height: 30px;
  background: radial-gradient(50% 50%, #ef4234 0%, transparent 100%);
  z-index: 1;
  border-radius: 50%;
  transition: 0.5s linear;
  animation: grow 4s linear infinite;
}

@keyframes pulse{
  0%{
    transform: rotate(45deg) scale(1);
  }
  25%{
    transform: rotate(45deg) scale(0.8);
  }
  50%{
    transform: rotate(45deg) scale(1);
  }
  75%{
    transform: rotate(45deg) scale(0.8);
  }
  100%{
    transform: rotate(45deg) scale(1);
  }
}

@keyframes grow{
  0%{
    transform: scale(1);
  }
  25%{
    transform: scale(0.8);
  }
  50%{
    transform: scale(1);
  }
  75%{
    transform: scale(0.8);
  }
  100%{
    transform: scale(1);
  }
}