<br>
<p class="follow-me">
  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="22" viewBox="0 0 260 220">
  <path fill="#fff" d="M5 187c100 62 227-7 225-130 10-7 19-16 26-27-10 5-20 8-31 9 11.4-7 20-17 24-29-10 6-20 10-33 13-43-41.3-100 3-88 47-43-2-80-23-106-54C10 40 15 71 39 85 30 84 20 82 15 78c0 26 18 46 41 51-8 2-15 3-23 1 6 20 26 36 48 36-20 16-47 24-76 21z"/>
</svg>
  
  <a href="https://twitter.com/TheAngularGuy" target="blank">
    @theAngularGuy
  </a>
</p>
<div class="wrapper">
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
  <div class="line">
    <div class="dot"></div>
  </div>
</div>
$color: #fff;

* {
  box-sizing: border-box;  
}
body {
  background: #1D1C1E;
  color: $color;
  font-family: arial;
  height: 100%;
  background: linear-gradient(to right, #0E0E0E, #333333);
}

.wrapper {
  width: 200px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .line {
    // outline: 1px solid red;
    height: 20px;
    position: relative;
    margin-bottom: 7px;
    
    .dot {
      position: absolute;
      background: $color;
      box-shadow: 1px 1px 12px 2px $color;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      animation: move 1s ease-in-out infinite;
    }
  }
  
  
  @for $i from 1 through 12 {
    .line:nth-child(#{$i}) {
      width: calc(100% - 12% + #{$i}%);
      
      .dot {
        animation-duration: calc(1s + calc(#{$i} * 5ms));
      }
    }
  }
}

@keyframes move {
  0% {
    top: 0; left: 0;
  } 25% {
    top: 7px;
  } 50% {
    top: 0; left: calc(100% - 20px);
  } 75% {
    top: 7px;
  } 100% {
    top: 0; left: 0;
  }
}

// For safari
@media not all and (min-resolution: 0.001dpcm) {
  .wrapper {
    .line {
      // outline: 1px solid red;
      position: relative;
      width: 100%;
      
      .dot {
        width: 100%;
        background: transparent;
        box-shadow: none;
        animation: moveHoriz 1s ease-in-out infinite;

        &::after {
          content:'';
          position: absolute;
          background: $color;
          box-shadow: 1px 1px 12px 2px $color;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          animation: moveVert ease-in-out infinite;
        }
      }
    }


    @for $i from 1 through 12 {
      .line:nth-child(#{$i}) {
        width: calc(100% - 12% + #{$i}%);
        
        .dot, .dot::after {
          animation-duration: calc(1s + calc(#{$i} * 5ms));
        }
      }
    }
  }

  @keyframes moveVert {
    0% {
      transform: translateY(0);
    } 25% {
      transform: translateY(7px);
    } 50% {
      transform: translateY(0px);
    } 75% {
      transform: translateY(7px);
    } 100% {
      transform: translateY(0);
    }
  }

  @keyframes moveHoriz {
    0% {
      transform: translateX(0);
    } 50% {
      transform: translateX(calc(100% - 20px));
    } 100% {
      transform: translateX(0);
    }
  }
}


.follow-me {
  transform: scale(.8);
  padding-left: 1rem;
  font-weight: bold;
  opacity: .5;
  display: flex;
  align-items: center;
  gap: 5px;
}
a {
  color: inherit;
  text-decoration: none;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.