<svg width="1200" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path id="path" fill="#F9F9F9">
<animate attributeName="d" dur="4000ms" repeatCount="indefinite"
values="m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
m0,-1l1200,0l0,192c-50.41666,-1.24999 -97.08334,-57.49972 -147.50001,-58.74971l-152.49999,58.74971c-50,-1.66666 -102.49999,-57.08305 -152.49999,-58.74971l-147.50001,58.74971c-50,-1.66666 -106.24997,-48.33309 -156.24997,-49.99975l-143.75003,51.24974c-50,-2.91665 -95.00002,-57.08305 -145.00002,-59.9997l-154.99998,58.74971l0,-192z;
m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
"/>
</path>
</g>
</svg>
Примерно так. Где values - 3 строки. Первая и последняя - это прямая линия (на глаз делал), вторая строка - волнистая линия. Остальное и так понятно
