<div class="heart"></div>
<div class="heart shadow"></div>
html, body {
  min-height: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.heart {
  background: #c33;
  width: 200px;
  height: 200px;
  transform: rotate(-45deg);
  position: relative;
  animation: heartbeat 2s infinite;
}
.heart:before,
.heart:after {
  content: '';
  position: absolute;
  background: #c33;
  width: 200px;
  height: 200px;
  border-radius: 50%;

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

.heart.shadow {
  position: absolute;
  filter: blur(20px);
}

@keyframes heartbeat
{
  0%{transform: rotate(-45deg) scale( .75 )}
  20%{transform: rotate(-45deg) scale( 1 )}
  40%{transform: rotate(-45deg) scale( .75 )}
  60%{transform: rotate-(45deg) scale( 1 )}
  80%{transform: rotate(-45deg) scale( .75 )}
  100%{transform: rotate(-45deg) scale( .75 )}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.