snek

index.html

<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>

snek.markdown

snek

A Pen by The Angular Guy on CodePen.

License.

style.scss

$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 {
      background: $color;
      box-shadow: 1px 1px 12px 2px $color;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      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;
  }
}

.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;
}