<svg class="steps" viewBox="0 0 850 250" xmlns="http://www.w3.org/2000/svg">
  <path d="m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill="none" stroke="#f5f5f5" stroke-linecap="round" stroke-linejoin="round" stroke-width="50"/>
  <path class="steps__path" d="m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill="none" stroke="#12e09f" stroke-linecap="round" stroke-linejoin="round" stroke-width="50"/>
</svg>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.steps {
  width: 100%;
  max-width: 400px;
}

.steps__path {
  stroke-dasharray: 1640;
  stroke-dashoffset: 1020;
  animation: line 4s ease-in-out infinite alternate-reverse;
}

@keyframes line {
  100% {
    stroke-dashoffset: -1020;
  }
}