Create an abstract curved lines background for website

I want to create an abstract curved lines background for website which is reactive on scroll and moving lines.

same design like in this video but reactive on scroll.
can anyone help with the resources, coz i don’t even know how to code :slight_smile:

To get you started, you can:

  • create a wavy plane with simplex noise
  • add altitude texture and shift it vertically

When I try this, I get a similar result:

However, if you cannot program this yourself, and you want someone to do it for you, it might be better to place this request in the jobs category.


Noise is the key, yes :slight_smile: Sci-fi Scene that I made - #7 by prisoner849


Thankyou Pavel, Can you atleast drop me steps so that i can try it on my own.

I like the result with VoroNoise


There are several ways to do this effect. The one that I tried uses the following steps:

1. Start with a plane:

2. Uses some noise function to curve the plane

I used SimplexNoise from Three.js addons. This step requires to change the vertex positions in the BufferAttribute of the geometry.

3. Apply a texture that is just a line

For example, it could be a black square with a white horizontal line. Such a texture could be loaded from a file, or drawn in a canvas. I used canvas texture:

4. Remap the UV coordinates

By default UV coordinates of a plane are mapped to XY coordinates of vertices. For an altitude mapping I set U=0 and V=Z. This will create something called “isolines” – lines that mark the same altitude across the whole ‘terrain’. Practically, this can be done together with shaping the curves of the plane.

5. Flatten the plane

But do not recalculate texture coordinates

6. Look at the plane from above

7. Adjust the density of lines

This requires finding suitable values for texture’s repeat property that makes your aesthetically happy

8. Shift the texture in animation loop

This will continuously move the lines “up” or “down” in altitude. As a code, this is just changing the texture’s offset property.


Thanks Buddy for this help