Is there a way to animate this SVG with a gradient using CSS?

Question

So I found this image on Google and wanted to try and recreate this graphic and animate it. The part I am talking about is the Purple to Pink gradient waves at the top left of t

Answer 1

Fill the entire container with a rectangle, having a linear gradient at angle. Then you can add your waves and animate them.

If you need to show waves in the smaller inner rectangle either add another one or use clipping with the clipped area dimensions.

Either way, here's a start:

<div id='container' style="width: 200px; height: 200px">
    <svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 200 200' preserveAspectRatio='none' shape-rendering='auto'>
        <defs>
            <path id='wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' />
            <linearGradient id="gradient1" x1="1" x2="0" y1="0" y2="1">
                <stop offset="0%" stop-color="#E863BA" />
                <stop offset="100" stop-color="#211D2F" />
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)"></rect>
        <g class='parallax'>
            <use xlink:href='#wave' x='48' y='140' fill='rgba(255, 255, 255, 0.7)' />
            <use xlink:href='#wave' x='48' y='143' fill='rgba(255, 255, 255, 0.5)' />
            <use xlink:href='#wave' x='48' y='145' fill='rgba(255, 255, 255, 0.3)' />
            <use xlink:href='#wave' x='48' y='147' fill='rgba(255, 255, 255, 0.1)' />
        </g>
    </svg>
</div>