Background SVG Lines animation

[Nick.Ls]

Hi everyone!

 

I have been troubling myself to create a background svg animation. The concept is a topographic map in a svg, that will have the effect of water movement (displacement).

 

I have created several different setups in order to achieve this but in most cases I end up with distorted / breaking lines as in the codepen which is bad because I need the lines to be kept smooth.

 

The most efficient way to do this so far without any breaks is to morphSVG the paths from A to B to C and so on to create the final effect BUT since the paths are way to many and the alterations of it bring even more paths it is a great setup for me. Very time consuming setup.

 

In the codepen example I tried creating a Turbulence which brings almost the same result as morphing all the paths but the main problem of the line weird render / break occurs.

 

Last I've tried pixiJs and something similar to https://pixijs.com/examples/filters-basic/displacement-map-flag

where I got a better render on the lines, not perfect, not ideal, just better.

 

I am open to suggestions or similar implementations if anyone has a better view on this.

 

Thank you all for your time!

See the Pen ExOLMmG by Nick_Ls (@Nick_Ls) on CodePen

[Rodrigo]

Hi,

 

This is something I did a few years ago using THREEJS:

See the Pen 6c8103e788ac03e0a7999c4f4bc26865 by rhernando (@rhernando) on CodePen

 

Basically the idea is to update individual points on the Z axis in order to create the effect. I don't know a lot of THREE and this was something I kind of reversed engineered back in the day, but thought it might help. You would have to change the image being used, make it fully responsive (I don't know if it's working properly in that way) and adjust the camera position and lights, but hopefully it would shed some idea.

 

Happy Tweening!

[Nick.Ls]

13 minutes ago, Rodrigo said:

Hi,

 

This is something I did a few years ago using THREEJS:

 

 

 

Basically the idea is to update individual points on the Z axis in order to create the effect. I don't know a lot of THREE and this was something I kind of reversed engineered back in the day, but thought it might help. You would have to change the image being used, make it fully responsive (I don't know if it's working properly in that way) and adjust the camera position and lights, but hopefully it would shed some idea.

 

Happy Tweening!

 

Hi @Rodrigo,

 

Thanks for sharing, I will give it a try!