Create wave for specific SVG point sets

[Satheesh]

How do create wave animation for the below SVG image.

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="163" viewBox="0 0 1440 163">
    <g fill="none" fill-rule="evenodd">
        <g fill="#FEFEFE">
            <g>
                <g>
                    <path d="M 167 190 c 61.5 1.762 91.164 35.252 106.358 50.235 c 15.194 14.982 23.877 11.457 36.176 -9.696 c 12.3 -21.151 31.113 -22.913 39.795 -16.744 c 8.683 6.17 18.089 13.22 30.388 2.644 c 12.3 -10.576 33.282 -44.948 83.929 -26.44 c 50.648 18.508 69.458 8.814 75.97 -4.406 c 6.512 -13.22 13.748 -15.863 23.154 0 c 9.405 15.863 22.429 13.22 17.364 1.763 c -5.064 -11.457 -2.895 -44.066 40.517 8.813 c 56.65 9.288 103.65 17.288 200.65 0.288 c 77.417 -67.86 115.763 -55.523 110.699 -43.183 c -5.065 12.338 1.447 24.676 48.476 5.287 c 47.028 -19.389 78.141 -2.644 73.077 15.864 c -5.065 18.507 23.152 31.727 76.693 7.05 c 53.541 -24.678 73.076 -18.508 97.676 -6.17 c 24.6 12.339 32.56 37.015 109.975 25.558 c 45.088 -6.672 79.732 -8.062 108.172 -2.78 c 13.596 2.526 18.088 38.696 13.475 108.511 L 731.89 271 L 0.247 301 V 200.558 s 10.853 33.49 56.435 1.762 c 0 0 40.518 -40.54 116.318 -13.32 z" transform="translate(0 -923) translate(-213 -94) translate(198.203 879) matrix(-1 0 0 1 1458.076 0)"/>
                </g>
            </g>
        </g>
    </g>
</svg>

[mikel]

Hey @Satheesh,

 

Welcome to the GreenSock Forum.

 

Take a look at the MorphSVGPlugin in the docs.
Here is an example

 

See the Pen KORMKE by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

[Satheesh]

Thank you @mikel
MorphSVG makes animation from top to bottom or bottom to left.
I need animations, that is going from left to right, like continuous waves.
 

[ZachSaucier]

Hey Satheesh. There's a lot of different ways to create a "wave" animation like that.

 

One way is to make the SVG in a way to where you can repeat it in the x direction seamlessly (so the left and right edge connect visually if you duplicated it) then translate the SVG to the right. 

 

Then there's this way of creating waves:

 

And this way:

 

And relatedly this way:

See the Pen BaKmbvb?editors=0010 by petebarr (@petebarr) on CodePen