Coding a Valentine’s Day Loveheart ♥

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>

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>


.heart {
  height: 0;
  width: 0;
  border: 19px solid transparent;
  border-top: 20px solid #E7C3D7;
  position: relative;
  top: -5px;
  margin: 0 auto;
  position: relative;
.heart:after {
  background-color: #E7C3D7;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  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:

What do you think?
Feature image photo by Jess Watters on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s