Noise Gradient Mesh

<!-- Noise Gradient Mesh · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script type="module">import * as OGL from "https://esm.sh/ogl@1.0.11"; window.OGL = OGL;</script>

<div class="jouw-container">

</div>

/* Noise Gradient Mesh · NedDev · eigen werk. */
.ngc-c{position:absolute;inset:0;display:block;width:100%;height:100%;background:#0a0a0a}

// Noise Gradient Mesh · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(typeof OGL==='undefined'){root.innerHTML='<div class=ngc-c style="background:linear-gradient(120deg,#0a0a0a,#F5480F)"></div>';return;}
var renderer=new OGL.Renderer({alpha:false,dpr:Math.min(2,window.devicePixelRatio)});var gl=renderer.gl;gl.canvas.className='ngc-c';root.appendChild(gl.canvas);
var frag='precision highp float;uniform float uT;uniform vec2 uR;varying vec2 vUv;float n(vec2 p){return fract(sin(dot(p,vec2(12.9,78.2)))*43758.5);}void main(){vec2 uv=vUv;float t=uT*.15;float w=sin(uv.x*3.0+t)*.5+cos(uv.y*4.0-t*1.3)*.5;vec3 ink=vec3(.04);vec3 org=vec3(.96,.28,.06);vec3 col=mix(ink,org,smoothstep(-.6,.9,w+uv.y*.3));col+=(n(uv*uR.xy*.5+t)-.5)*.06;gl_FragColor=vec4(col,1.0);}';
var program=new OGL.Program(gl,{vertex:'attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0,1);}',fragment:frag,uniforms:{uT:{value:0},uR:{value:[1,1]}}});
var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});
function resize(){renderer.setSize(root.clientWidth,root.clientHeight);program.uniforms.uR.value=[gl.canvas.width,gl.canvas.height];}resize();window.addEventListener('resize',resize);
if(rm){renderer.render({scene:mesh});return;}var vis=true;var io=new IntersectionObserver(function(es){es.forEach(function(e){vis=e.isIntersecting;});});io.observe(root);
(function frame(t){requestAnimationFrame(frame);if(!vis)return;program.uniforms.uT.value=t*0.001;renderer.render({scene:mesh});})(0);
}
init(document.querySelector('.jouw-container'));