I'm attempting to create a lifelike animated svg flag that flutters in the wind. Currently, I am using this simple flag base:
<svg
xmlns="http://www.w3.org/2000/svg"
width="200px"
height="100px"
viewBox="0 0 200 100"
>
<path
fill="red"
d=
"
M 20,20
Q 25,10 50,20
T 80,20
L 80,80
Q 75,90 50,80
T 20,80
z
"
>
<animate
dur="1.8s"
attributeName="d"
fill="freeze"
repeatCount="indefinite"
values=
"
M 20,20
Q 25,10 50,20
T 80,20
L 80,80
Q 75,90 50,80
T 20,80
z;
M 20,30
Q 35,30 50,20
T 80,20
L 80,80
Q 65,70 50,80
T 20,90
z;
M 20,20
Q 25,10 50,20
T 80,20
L 80,80
Q 75,90 50,80
T 20,80
z;
"
calcMode="spline"
keySplines="0,0,.58,1; 0,0,.58,1"
/>
</path>
<line x1="50" y1="35" x2="50" y2="65" stroke="#fff" stroke-width="10" />
<line x1="35" y1="50" x2="65" y2="50" stroke="#fff" stroke-width="10" />
</svg>This design features a square with an additional midpoint on the top and bottom edges. To animate the flag, I'm adjusting the corner points of the left edge and curvature of the midpoints, but it doesn't quite capture the natural movement of a flag.
I aspire to achieve a more realistic flutter effect that mimics a sine wave moving from right to left. I've experimented with animating the midpoints to "flow" towards the left edge while changing curvature angles, but it still doesn't produce the desired visual effect.