SOURCE

<div class="bg">
  <div class="screen">
    <span class="shadow"></span>
    <img class="heart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/HEART.png">
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>

    <div>
      <h2 class="bpm one">67 BPM</h2>
    </div>

    <div class="watch">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/red-watch.png">
    </div>
  </div>
</div>

.bg {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  // background: #FFB5A8;
  background: #FFC6B4;
  justify-content: space-around;
  color: #fff;
}

.watch {
  position: absolute;
  top: 50%;
  transform: translateX(-21.15%) translateY(-49.75%);
}

.screen {
  transform: scale(0.4);
  width: 272px;
  height: 340px;
  margin: auto;
  position: relative;
  position: relative;
  flex-direction: column;
  background: #AD2442;
}

.heart {
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  width: 66%;
  opacity: 0.95;
  animation: beat 1.2s ease-in-out infinite forwards;
}

.bpm {
  font-size: 40px;
  letter-spacing: 0.1em;
  font-family: rift-soft, sans-serif;
  color: #ffe1dd;
  opacity: 1;
  z-index: 100;
  position: relative;
  text-align: center;
  top: 55px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.shadow {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  top: 50%;
  left: 50%;
  border-radius: 100px;
  box-shadow: 0 0 200px 60px rgba(70, 0, 44, 0.6);
  position: absolute;
  z-index: 0;
  animation: beat-shadow 1.2s ease-in-out infinite forwards;
}

.tick {
  width: 10px;
  height: 10px;
  background: #ff6c5e;
  opacity: 0.6;
  border-radius: 100%;
  position: absolute;
  transition: all 0.3s ease-out;

  &:nth-of-type(1) {
    top: 20px;
    left: 126px;
    animation: tock 12s ease-out 0s infinite forwards;
  }
  &:nth-of-type(2) {
    top: 50px;
    right: 60px;
    animation: tock 12s ease-out 1s infinite forwards;
  }
  &:nth-of-type(3) {
    top: 100px;
    right: 25px;
    animation: tock 12s ease-out 2s infinite forwards;
  }
  &:nth-of-type(4) {
    top: 165px;
    right: 10px;
    animation: tock 12s ease-out 3s infinite forwards;
  }
  &:nth-of-type(5) {
    bottom: 90px;
    right: 25px;
    animation: tock 12s ease-out 4s infinite forwards;
  }
  &:nth-of-type(6) {
    bottom: 45px;
    right: 60px;
    animation: tock 12s ease-out 5s infinite forwards;
  }

  &:nth-of-type(7) {
    bottom: 20px;
    right: 126px;
    opacity: 1;
    background: #ffd0cb;
    // animation: tock 12s ease-out 6s infinite forwards;
  }
  &:nth-of-type(8) {
    bottom: 45px;
    left: 60px;
    animation: tock 12s ease-out 7s infinite forwards;
  }
  &:nth-of-type(9) {
    bottom: 90px;
    left: 25px;
    animation: tock 12s ease-out 8s infinite forwards;
  }
  &:nth-of-type(10) {
    top: 165px;
    left: 10px;
    animation: tock 12s ease-out 9s infinite forwards;
  }
  &:nth-of-type(11) {
    top: 100px;
    left: 25px;
    animation: tock 12s ease-out 10s infinite forwards;
  }
  &:nth-of-type(12) {
    top: 50px;
    left: 60px;
    animation: tock 12s ease-out 11s infinite forwards;
  }

  &:nth-of-type(1),
  &:nth-of-type(4),
  &:nth-of-type(7),
  &:nth-of-type(10) {
    width: 20px;
    height: 20px;
  }
}

@keyframes beat {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
  }
  15%,
  45% {
    transform: scale3d(1.225, 1.225, 1);
  }
  35% {
    transform: scale3d(1.15, 1.15, 1);
  }
  65% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes beat-shadow {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
  }
  15%,
  45% {
    transform: scale3d(1.1, 1.1, 1);
  }
  30%,
  60% {
    transform: scale3d(1, 1, 1);
  }
}


@keyframes tock {
  0%, 2% {
    opacity: 0.95;
    background: #ffd0cb;
  }
  10%, 100% {
    opacity: 0.6;
    background: #ff6c5e;
  }
}