Waving flag, waving flagpole and waving linear gradient

Hi, I’m trying to do like this guy: How to make a 3d waving flag using Three.js, WebGL and Javascript - YouTubehttps://flag-1.superhi.com/ but using inline SVG instead of a PNG. It consists of three layers, a flagpole, one half of the flag and the other half: https://codepen.io/wawawewah/pen/QWxOorO

How would I go about making the flag wave, with each of the halves having their own animated linear gradient?

Also, is it possible to make the flagpole wave the flag around in addition to all the rest? Like the top part of the pole is rotating while the bottom is still, if that makes sense. Like often seen at large soccer matches :slightly_smiling_face:

Wouldn’t mind paying $50 if anybody’s interested? Many thanks!

I see this in your codepen

But what the desired result and behaviour?

I would like to work on this
portfolio: https://vaibhavkhating.netlify.app/
MindSpark 21