Drijvend raster

A grid of squares drifts slowly diagonally across a canvas; the square under the cursor lights up orange and fades out. Background for tech or construction.

Ingenieursbureau Raster

Constructies op maat

How to use it

Paste the HTML where the backgrounds & webgl should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Drijvend raster · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-sqr"><canvas class="ei-sqr__cv"></canvas><div class="ei-sqr__t"><span>Ingenieursbureau Raster</span><h3>Constructies op maat</h3></div></div>
</div>

/* Drijvend raster · NedDev · eigen werk. */
.ei-sqr{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.ei-sqr__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ei-sqr__t{position:absolute;left:22px;bottom:20px;color:#fff;pointer-events:none}
.ei-sqr__t span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}
.ei-sqr__t h3{margin:6px 0 0;font-family:'Switzer',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}

// Drijvend raster · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-sqr'),cv=w.querySelector('.ei-sqr__cv'),ctx=cv.getContext('2d');var S=32,dpr=Math.min(2,window.devicePixelRatio||1),W=0,H=0,mx=-1,my=-1,heat={};
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function size(){W=w.clientWidth;H=w.clientHeight;cv.width=W*dpr;cv.height=H*dpr;}size();if(window.ResizeObserver)new ResizeObserver(size).observe(w);
w.addEventListener('pointermove',function(e){var r=w.getBoundingClientRect();mx=e.clientX-r.left;my=e.clientY-r.top;});w.addEventListener('pointerleave',function(){mx=my=-1;});
var visible=true;if(window.IntersectionObserver)new IntersectionObserver(function(es){visible=es[0].isIntersecting;}).observe(w);
var off=0;
function frame(){if(!w.isConnected)return;if(visible){
  if(!reduce)off+=.25;var ox=off%S;
  ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,W,H);
  if(mx>=0){var gx=Math.floor((mx-off)/S),gy=Math.floor((my-off)/S);heat[gx+','+gy]=1;}
  else if(!reduce&&Math.random()<.035){heat[Math.floor((Math.random()*W-off)/S)+','+Math.floor((Math.random()*H*.6-off)/S)]=.8;}
  for(var k in heat){heat[k]-=.02;if(heat[k]<=0){delete heat[k];continue;}var p=k.split(',');ctx.fillStyle='rgba(245,72,15,'+(heat[k]*.85).toFixed(3)+')';ctx.fillRect(+p[0]*S+off+1,+p[1]*S+off+1,S-2,S-2);}
  ctx.strokeStyle='rgba(255,255,255,.09)';ctx.lineWidth=1;ctx.beginPath();
  for(var x=ox-S;x<W+S;x+=S){ctx.moveTo(Math.round(x)+.5,0);ctx.lineTo(Math.round(x)+.5,H);}
  for(var y=ox-S;y<H+S;y+=S){ctx.moveTo(0,Math.round(y)+.5);ctx.lineTo(W,Math.round(y)+.5);}
  ctx.stroke();
}requestAnimationFrame(frame);}
requestAnimationFrame(frame);
}
init(document.querySelector('.jouw-container'));

More backgrounds & webgl

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →