Add animated codepen to specific section of my website

Site URL: https://plantain-mustard-p42a.squarespace.com/

I'm trying to add something like this custom background found here https://codepen.io/MAKIO135/pen/BbqLgR to the first section of my home/landing page of my website.

My steps that I've tried

1. Add a blank section
2. Create a code block
3. Paste the HTML scripts
4. Add my own <script></script> and paste the javascript code inside that

This all works and it shows up on my page, it's just not in the specific section that i want it. It adds it to the bottom of the page (it goes below my Footer).

Is there a way to contain the code to the specific section that I created?

Any help is much appreciated. Thanks in advance!

Example: it goes below the footer, instead of inside the code block

My code so far is below

<script id="vertexShader" type="x-shader/x-vertex">
    #ifdef GL_ES
    precision mediump float;
    #endif

    attribute vec3 aPosition;
    
    void main() { 
        gl_Position = vec4(aPosition, 1.0); 
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    #define BLACK vec3(0.,0.,0.)
    #define WHITE vec3(1.,1.,1.)

    uniform vec2 u_resolution;
    uniform vec2 u_mouse;
    uniform float u_time;

    const float patternSize = 60.;
    const float noiseScale1 = 85.5;
    const float noiseScale2 = 20.3;
    
    void main() {
        vec2 nbRepetitions = floor(u_resolution / patternSize);
        vec2 tileOrigin = (gl_FragCoord.xy - (u_resolution - patternSize * nbRepetitions) / 2.0) / patternSize;
        vec2 pos = fract(tileOrigin);
        
        float color = 0.0;
        const float threshold = 1.0;
        const float minthreshold = threshold + 0.1;
        
        color += fill(rectSDF(
            rotate(pos, snoise(vec3(u_time / noiseScale1, floor(tileOrigin) / noiseScale1)) * 4.0 * PI - 2.0),
            vec2(minthreshold + threshold * snoise(vec3(u_time / 4.0, floor(tileOrigin) / noiseScale2)) , 5.0)
        ), 0.5);
        
        // logo
        pos = gl_FragCoord.xy - vec2(u_resolution - 60.);
        float dist = dot(pos, pos);
        float radius = 100.;
        
        
        color = clamp( color, 0.0, 1.0 );
        gl_FragColor = vec4(mix(BLACK, WHITE, color), 1.);
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script>
  console.clear()

const lib = `
/*
 
*/

precision highp float;
#ifdef GL_ES
precision mediump float;
#endif

// Maths
#define QTR_PI 0.78539816339
#define HALF_PI 1.5707963267948966192313216916398
#define PI 3.1415926535897932384626433832795
#define TWO_PI 6.2831853071795864769252867665590
#define TAU 6.2831853071795864769252867665590
#define PHI 1.618033988749894848204586834
#define EPSILON 0.0000001

float round(float f) {
    return f < 0.5 ? 0.0 : 1.0;
}
float random(float x) {
    return fract(sin(x) * 1e4);
}
float random(vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

// Simplex noise 3D
// https://github.com/ashima/webgl-noise/wiki
vec3 mod289(vec3 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
    return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r){
    return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v){
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
    // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;
    // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );
    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
    //   x1 = x0 - i1  + 1.0 * C.xxx;
    //   x2 = x0 - i2  + 2.0 * C.xxx;
    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
    // Permutations
    i = mod289(i);
    vec4 p = permute( permute( permute(
            i.z + vec4(0.0, i1.z, i2.z, 1.0 ) )
            + i.y + vec4(0.0, i1.y, i2.y, 1.0 ) )
            + i.x + vec4(0.0, i1.x, i2.x, 1.0 ) );
    // Gradients: 7x7 points over a square, mapped onto an octahedron.
    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
    float n_ = 0.142857142857; // 1.0/7.0
    vec3  ns = n_ * D.wyz - D.xzx;
    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);
    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );
    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));
    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);
    //Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;
    // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

// Style
/*float aastep(float threshold, float value) {
    float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
    return smoothstep(threshold-afwidth, threshold+afwidth, value);
}*/
float aastep(float threshold, float value) {
    return smoothstep(threshold - 0.04, threshold + 0.04, value);
}

float smoothaastep(float threshold, float value, float smooth) {
    return smoothstep(threshold - smooth, threshold + smooth, value);
}

float fill(float x, float size) {
    return 1.-aastep(size, x);
}

float smoothfill(float x, float size, float smooth) {
    return 1.-smoothaastep(size, x, smooth);
}

float stroke(float x, float size, float w) {
    float d = aastep(size, x+w*.5) - aastep(size, x-w*.5);
    return clamp(d, 0., 1.);
}

float smoothstroke(float x, float size, float w, float smooth) {
    float d = smoothaastep(size, x+w*.5, smooth) - smoothaastep(size, x-w*.5, smooth);
    return clamp(d, 0., 1.);
}

vec3 bridge(vec3 c,float d,float s,float w) {
    c *= 1.-stroke(d,s,w*2.);
    return c + stroke(d,s,w);
}
 
float flip(float v, float pct) {
    return mix(v, 1.-v, pct);
}

// Transforms
vec2 rotate(vec2 st, float a) {
    st = mat2(cos(a),-sin(a),
              sin(a),cos(a))*(st-.5);
    return st+.5;
}
 
vec2 scale(vec2 st, vec2 s) {
    return (st-.5)*s+.5;
}

// SDF 
float circleSDF(vec2 st) {
    return length(st-.5)*2.;
}
 
float rectSDF(vec2 st, vec2 s) {
    st = st*2.-1.;
    return max( abs(st.x/s.x),
                abs(st.y/s.y) );
}

float crossSDF(vec2 st, float s) {
    vec2 size = vec2(.25, s);
    return min( rectSDF(st.xy,size.xy),
                rectSDF(st.xy,size.yx));
}
 
float flowerSDF(vec2 st, int N) {
    st = st*2.-1.;
    float r = length(st)*2.;
    float a = atan(st.y,st.x);
    float v = float(N)*.5;
    return 1.-(abs(cos(a*v))*.5+.5)/r;
}
 
float heartSDF(vec2 st) {
    st -= vec2(.5,.8);
    float r = length(st)*5.;
    st = normalize(st);
    return r - 
         ((st.y*pow(abs(st.x),0.67))/ 
         (st.y+1.5)-(2.)*st.y+1.26);
}
 
float hexSDF(vec2 st) {
    st = abs(st*2.-1.);
    return max(abs(st.y), st.x * 0.866025 + st.y * 0.5);
}

float polySDF(vec2 st, int V) {
    st = st*2.-1.;
    float a = atan(st.x,st.y)+PI;
    float r = length(st);
    float v = TAU/float(V);
    return cos(floor(.5+a/v)*v-a)*r;
}
 
float raysSDF(vec2 st, int N) {
    st -= .5;
    return fract(atan(st.y,st.x)/TAU*float(N));
}

float spiralSDF(vec2 st, float t) {
    st -= .5;
    float r = dot(st,st);
    float a = atan(st.y,st.x);
    return abs(sin(fract(log(r)*t+a*0.159)));
}

float starSDF(vec2 st, int V, float s) {
    st = st*4.-2.;
    float a = atan(st.y, st.x)/TAU;
    float seg = a * float(V);
    a = ((floor(seg) + 0.5)/float(V) + 
        mix(s,-s,step(.5,fract(seg)))) 
        * TAU;
    return abs(dot(vec2(cos(a),sin(a)),
                   st));
}

float triSDF(vec2 st) {
    st = (st*2.-1.)*2.;
    return max(abs(st.x) * 0.866025 + st.y * 0.5, -st.y * 0.5);
}

float rhombSDF(vec2 st) {
    return max(triSDF(st),
               triSDF(vec2(st.x,1.-st.y)));
}

float vesicaSDF(vec2 st, float w) {
    vec2 offset = vec2(w*.5,0.);
    return max( circleSDF(st-offset),
                circleSDF(st+offset));
}

`;

const vertexShader = document.getElementById('vertexShader').innerText;
const fragmentShader = lib + document.getElementById('fragmentShader').innerText;
let myShader;

function setup() {
    pixelDensity(1);
    createCanvas(windowWidth, windowHeight*.6, WEBGL);
    noStroke();

    // create and initialize the shader
    myShader = createShader(vertexShader, fragmentShader);
    shader(myShader);
    myShader.setUniform('u_resolution', [width, height]);
}

function draw() {
    myShader.setUniform('u_mouse', [mouseX, mouseY]);
    myShader.setUniform('u_time', millis()/1000.);
    quad(-1,-1, -1,1, 1,1, 1,-1);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight*.6);
    myShader.setUniform('u_resolution', [width, height]);
}
</script>

<style>
#block-yui_3_17_2_1_1653608474127_6581 {
  overflow: hidden;
  padding: 0px 0px 17px;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  max-height: 60vh;
}
</style>

Tagging @tuanphan, sorry to bother you! You seem like the biggest expert on this forum. Would be super appreciative if you could help!!! Thank you