I am experimenting with svg to generate an impression of water waves.
Here's my initial attempt:
<filter id='water' x='0%' y='0%' width='100%' height='100%'><feTurbulence baseFrequency="0.01 0.1" result="NOISE"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter><rect x="0" y="0" width="100%" height="100%" filter="url(#water)"></rect></svg>
I'm not going for realism here, this sort of thing is actually okay as a basis. I'd appreciate some advice on how I can use other filters to improve the result.
I would like to
- include noise at multiple scales
- sharpen the gradient a bit
- remap the colours
- make the blue parts slightly lighter, more like cyan
- make the grey patches also be a kind of blue, a different kind
- make the white patches also be another kind of blue