Quantcast
Channel: User spraff - Stack Overflow
Viewing all articles
Browse latest Browse all 55

What svg filters could make this noise look more like water?

$
0
0

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>

enter image description here

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

Viewing all articles
Browse latest Browse all 55

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>