Nov 19, 2022

# Solution 1 :

### Disclaimer

First of – don’t even think about trying to understand everything which is going in there. As a beginner you should really work your way up and at some point inventing your own fancy projects.

### Implementation

HTML

``````<head>
<!-- Other stuff -->
<!-- Other scripts of yours -->
``````

You are basically adding two scripts. The first one from a website the second one to one you have to copy yourself (that is the one you could see in the Codepen JS section).

JS

``````// filename: "shader.js"

let uf = {xy: '2f'};

const float PI = 3.14159265;
vec2 p = (2.0 * gl_FragCoord.xy - resolution.xy) / resolution.y;

vec4 s1 = vec4(1.0, 1.0, 1.0, 2.0);
vec4 s2 = vec4(-4.0, 4.0, 4.0, 4.6);

float tx = sin(time)*0.1;
float ty = cos(time)*0.1;

float a = mix(s1.x, s2.x, xy.x+tx);
float b = mix(s1.y, s2.y, xy.x+tx);
float n = mix(s1.z, s2.z, xy.y+ty);
float m = mix(s1.w, s2.w, xy.y+ty);

float max_amp = abs(a) + abs(b);
float amp = a * sin(PI*n*p.x) * sin(PI*m*p.y) + b * sin(PI*m*p.x) * sin(PI*n*p.y);
float col = 1.0 - smoothstep(abs(amp), 0.0, 0.1);
gl_FragColor = vec4(vec3(col), 1.0);

}`, {uniforms:uf}).fullscreen().loop();

``````

I didn’t bother to check what is going on there. If you are interested maybe you like to look up some tutorials about shaders.

CSS

``````canvas {
z-index: -1;
position: fixed;
top: 0;
}
``````

The Script works by creating a canvas on your page. This CSS moves it behind every element on your page (`z-index: -1`), makes it immovable (`position: fixed`) and starting at the very top edge of your window (`top: 0`).

# Problem :

Sorry for the stupid question, but I was wondering how I would be able to make this javascript my website’s background. Relatively new to JavaScript and am not quite sure how I would be able to implement it as the background.

``````'''https://codepen.io/strangerintheq/pen/JjdZKEa'''
``````

### Comment posted by Stranger in the Q

haha, nice to see it here :), you can find more similar things on my telegram channel ðŸ™‚

### Comment posted by user12451883

So I was able to add the scripts to the site, but I’m not too sure on how to store it in a canvas. Without having a canvas the script still shows up fullscreen and everything, but it covers everything else on the site. EDIT: Nevermind, I think it automatically creates a canvas.

### Comment posted by Phy

The two scripts will take care of that –

### Comment posted by rubyredsound.com

Yeah I have it as the background. The problem now is that I’m fading in a viewport over the background and I’m not sure how to keep the background when the viewport fades in. If you could check out the site (

### Comment posted by Phy

On the page I can’t see anything and there is no canvas element loaded so I believe sth went wrong executing the scripts. Make sure they load in the same order I have them in the HTML snippet.

### Comment posted by Phy

Anyhow if you say it works for you I guess you want to fiddle around with the