Happy Valentine’s day!

I’ve been a bit disorganised recently, and didn’t think to buy a card for my boyfriend… So I made him a little beating heart instead, which he thought was really cute! And I thought I’d share it with you ♥

The main HTML structure is:

<div class="contain">
  <span class="heart pink" id="heart">&hearts;</span>
</div>

With the following CSS:

.contain {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
}
.pink {
  color: #E7C3D7;
}
.heart {
  font-size: 110px;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
}
.heart.beat {
  font-size: 130px;
}

And some javascript:

var heart = document.getElementById('heart'),
  inBeat = function(el) {el.classList.remove('beat')},
  outBeat = function(el) {el.classList.add('beat')},
  beat = function() {this.classList.value.indexOf('beat') > -1 ? inBeat(this) : outBeat(this)}
heart.addEventListener("transitionend", beat, true);
window.onload = function() {outBeat(heart)};

Which gives us:

It’s a little slap-dash with basic CSS, HTML and Javascript, but I like the end result! I then tried making a static loveheart using just a div and its pseudo elements:

<div class="heart"></div>

CSS:

.heart {
  height: 0;
  width: 0;
  border: 19px solid transparent;
  border-top: 20px solid #E7C3D7;
  position: relative;
  top: -5px;
  margin: 0 auto;
  position: relative;
}
.heart:before,
.heart:after {
  background-color: #E7C3D7;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  display:block;
  position: absolute;
  content: '';
}
.heart:before {
  border-bottom-right-radius: 0;
  right: 0;
  bottom: 15px;
}
.heart:after {
  border-bottom-left-radius: 0;
  left: 0;
  bottom: 15px;
}

Which produces this little fellow:

Feature image photo by Jess Watters on Unsplash