<div>
  <svg xmlns="http://www.w3.org/2000/svg" 
     width="90px" height="60px">
    <path id="short-wave" 
        fill="none" 
        stroke="#262626" 
        stroke-width="4">
    </path>
  </svg>
</div>

<div>
  <svg xmlns="http://www.w3.org/2000/svg" 
     width="90px" height="60px">
    <path id="long-wave" 
        fill="none" 
        stroke="#262626" 
        stroke-width="4">
    </path>
  </svg>
</div>

html, body { 
  height: 100%;
  margin: 0;
  width: 100%;
}

body { 
  align-items: center; 
  display: flex; 
}

div {
  align-items: center;
  border: 4px solid #262626;
  display: flex;
  height: 120px;
  margin: 0 auto;
  width: 120px;
}

svg { 
  margin: 0 auto; 
  overflow: hidden;
}

#short-wave,
#long-wave,{
  animation: moveTheWave 3s linear infinite;  
}

@keyframes moveTheWave {
  0% { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(-90px, 0, 0); }
}

function buildWave(w, h) {
 
  var m = 0.512286623256592433;
  
  var shortPathData = [
    'M', 0, h * 0.625, 
    'c',  0.25 * h * m, 0,
    0.25 * h * (1 - m), -0.25 * h, 
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h
  ].join(' ');
  
  shortWave.setAttribute('d', shortPathData);
  
  var longPathData = [
    'M', 0, h * 0.625, 
    'c',  0.25 * h * m, 0,
    0.25 * h * (1 - m), -0.25 * h, 
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
    's', 0.25 * h * (1 - m), -0.25 * h,
    0.25 * h, -0.25 * h,
    's', 0.25 * h * (1 - m), 0.25 * h,
    0.25 * h, 0.25 * h,
  ].join(' ');
  longWave.setAttribute('d', longPathData);
}

var shortWave = document.querySelector('#short-wave');
var longWave = document.querySelector('#long-wave');
buildWave(90, 60);