Heart Meditation

In this example below you will see how to do a Heart Meditation with some HTML / CSS and Javascript

Heart Meditation animation with HTML & CSS only ( with CSS Grid Layout)

Thumbnail
This awesome code was written by İlker Güller, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright İlker Güller ©
  • HTML
  • CSS
  • JavaScript
    <div class='grid-container'>
  <div class='center'>
    <div class="hearts"></div>
  </div>
  <div class='mid-top'>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
  </div>
  <div class='mid-bottom'>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
  </div>
  <div class='bottomright'>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
  </div>
  <div class='bottomleft'>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
  </div>
  <div class='horizontal-mid-left'>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
  </div>
  <div class='topleft'>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
  </div>
  <div class='topright'>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
  </div>
  <div class='horizontal-mid-right'>
    <div class="hearts reverse"></div>
    <div class="hearts"></div>
    <div class="hearts reverse"></div>
  </div>
</div>


<button id="toggleBorder">Toggle Border</button>

/*Downloaded from https://www.codeseek.co/the_bluescreen/heart-meditation-PamVEZ */
    html,
body {
  margin: 0;
  height: 100%;
  background: black;
  padding-top: 10px;
}
.grid-container > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
}
.grid-container {
  display: grid;
  // height: 100%;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "topleft mid-top topright" "horizontal-mid-left center horizontal-mid-right" "bottomleft mid-bottom bottomright";

  &.bordered {
    & > div {
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}
.center {
  grid-area: center;
  justify-content: center !important;
  .hearts {
    &:nth-of-type(1) {
      align-self: center;
      animation-delay: 0.2s;
    }
  }
}
.mid-top {
  grid-area: mid-top;
  .hearts {
    &:nth-of-type(1) {
      align-self: center;
      animation-delay: 1.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: center;
      animation-delay: 0.5s;
    }
  }
}
.mid-bottom {
  grid-area: mid-bottom;
  .hearts {
    &:nth-of-type(1) {
      align-self: center;
      animation-delay: 0.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: center;
      animation-delay: 1.5s;
    }
  }
}
.bottomright {
  grid-area: bottomright;
  .hearts {
    &:nth-of-type(1) {
      align-self: flex-start;
      animation-delay: 0.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: flex-end;
      animation-delay: 1.5s;
    }
  }
}
.bottomleft {
  grid-area: bottomleft;
  .hearts {
    &:nth-of-type(1) {
      align-self: flex-end;
      animation-delay: 0.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: flex-start;
      animation-delay: 1.5s;
    }
  }
}
.horizontal-mid-left {
  grid-area: horizontal-mid-left;
  flex-direction: row !important;
  .hearts {
    &:nth-of-type(1) {
      align-self: center;
      animation-delay: 1.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: center;
      animation-delay: 0.5s;
    }
  }
}
.topleft {
  grid-area: topleft;
  .hearts {
    &:nth-of-type(1) {
      animation-delay: 1.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: flex-end;
      animation-delay: 0.5s;
    }
  }
}
.topright {
  grid-area: topright;
  .hearts {
    &:nth-of-type(1) {
      align-self: flex-end;
      animation-delay: 1.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: flex-start;
      animation-delay: 0.5s;
    }
  }
}
.horizontal-mid-right {
  grid-area: horizontal-mid-right;
  flex-direction: row !important;
  .hearts {
    &:nth-of-type(1) {
      align-self: center;
      animation-delay: 0.5s;
    }
    &:nth-of-type(2) {
      align-self: center;
      animation-delay: 1s;
    }
    &:nth-of-type(3) {
      align-self: center;
      animation-delay: 1.5s;
    }
  }
}

.hearts {
  width: 10px;
  height: 10px;
  //border-radius: 5px;
  //background: white;
  text-indent: -9999px;
  animation-name: fade-in;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-iteration-count: infinite;

  order: 0;
  flex: 0 1 auto;
  align-self: flex-start;

  position: relative;
  float: left;

  &.reverse {
    //background: black;
    //border: 1px solid white;

    &:before,
    &:after {
      background: black;
      border: 1px solid white;
    }
  }

  &:before,
  &:after {
    position: absolute;
    content: "";
    left: 5px;
    top: 0;
    width: 5px;
    height: 8px;
    background: white;
    border-radius: 5px 5px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  &:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  1000% {
    opacity: 1;
  }
}



/*Downloaded from https://www.codeseek.co/the_bluescreen/heart-meditation-PamVEZ */
    $(() => {
  $('#toggleBorder').on('click', () => {
    $('.grid-container').toggleClass('bordered');
  })
});

Comments