<div id="container">
  <p id="count">1</p>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
 <p class="message">Requires a browser that supports CSS Motion Path spec with the offset-* naming</p>
$back: #863334;
$primary: #f5f5fb;
$duration: 3200ms;

#count, .dot {
  offset-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
  position: absolute;
}
#count {
  animation: pathy $duration  infinite linear;
  offset-distance: 0;
  color: $primary;
  display: inline-block; //none; //inline-block;
  text-align: center;
}
.dot {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: $primary;
  border-radius: 50%;
  opacity: 0;
  animation: pulse $duration infinite ease-in-out;
  
  &:nth-of-type(1) {
    offset-distance: 10%;
    animation-delay: ($duration/10);
  }
  &:nth-of-type(2) {
    offset-distance: 20%;
    animation-delay: ($duration/10 * 2);
  }
  &:nth-of-type(3) {
    offset-distance: 30%;
    animation-delay: ($duration/10 * 3);
  }
  &:nth-of-type(4) {
    offset-distance: 40%;
    animation-delay: ($duration/10 * 4);
  }
  &:nth-of-type(5) {
    offset-distance: 50%;
    animation-delay: ($duration/10 * 5);
  }
  &:nth-of-type(6) {
    offset-distance: 60%;
    animation-delay: ($duration/10 * 6);
  }
  &:nth-of-type(7) {
    offset-distance: 70%;
    animation-delay: ($duration/10 * 7);
  }
  &:nth-of-type(8) {
    offset-distance: 80%;
    animation-delay: ($duration/10 * 8);
  }
  &:nth-of-type(9) {
    offset-distance: 90%;
    animation-delay: ($duration/10 * 9);
  }
  &:nth-of-type(10) {
    offset-distance: 0%;
    animation-delay: 0ms;
  }
  
  &:nth-of-type(11) {
    offset-distance: 5%;
    animation-delay: ($duration/20);
  }
  &:nth-of-type(12) {
    offset-distance: 15%;
    animation-delay: ($duration/20 * 3);
  }
  &:nth-of-type(13) {
    offset-distance: 25%;
    animation-delay: ($duration/20 * 5);
  }
  &:nth-of-type(14) {
    offset-distance: 35%;
    animation-delay: ($duration/20 * 7);
  }
  &:nth-of-type(15) {
    offset-distance: 45%;
    animation-delay: ($duration/20 * 9);
  }
  &:nth-of-type(16) {
    offset-distance: 55%;
    animation-delay: ($duration/20 * 11);
  }
  &:nth-of-type(17) {
    offset-distance: 65%;
    animation-delay: ($duration/20 * 13);
  }
  &:nth-of-type(18) {
    offset-distance: 75%;
    animation-delay: ($duration/20 * 15);
  }
  &:nth-of-type(19) {
    offset-distance: 85%;
    animation-delay: ($duration/20 * 17);
  }
  &:nth-of-type(20) {
    offset-distance: 95%;
    animation-delay: ($duration/20 * 19);
  }
}

@keyframes pathy {
  100% {
    offset-distance: 100%;
  }
}
@keyframes pulse {
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.message {
  display: none;
  .no-motionpath & {
    display: block;
    color: $primary;
    padding: 1rem;
  }
}




body {
  background: $back;
  background: radial-gradient(circle, #a65354 0%, $back 100%) center center no-repeat;
  font-family: "Helvetica Neue", Arial, sans-serif;
  height: 100vh;
}
#container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  .no-motionpath & {
    display: none;
  }
}
View Compiled
var p = document.getElementById('count');
if (p.style.offsetPath !== undefined) {
  var counter = 2;
  p.addEventListener('animationiteration', function(e) {
    p.textContent = (counter++);
  });
} else {
  document.documentElement.classList.add('no-motionpath');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.