<div class="hb-wrap">
  <div class="hb-line"></div>
</div>

.hb-wrap {
  width: 120px;
  height: 40px;
  overflow: hidden;
}

.hb-line {
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpolyline points='0,20 30,20 40,5 50,35 60,5 70,35 80,20 110,20 120,20 150,20 160,5 170,35 180,5 190,35 200,20' fill='none' stroke='%23ff6c8a' stroke-width='2.5'/%3E%3C/svg%3E")
    repeat-x center/50% 100%;
  animation: hbeat 1s linear infinite;
}
@keyframes hbeat {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-wrap,
  .hb-wrap * {
    animation: none !important;
  }
}