Pixelate SVG Filter New
An image that starts pixelated and sharpens on hover, using a pure SVG filter. For a teaser or a new project reveal.
How to use it
- Paste the HTML where the components 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.
<!-- Pixelate SVG Filter · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="pxf"><svg class="pxf__defs" width="0" height="0" aria-hidden="true"><filter id="pxf-f" x="0" y="0" width="100%" height="100%"><feFlood x="6" y="6" width="1" height="1"/><feComposite width="12" height="12"/><feTile result="t"/><feComposite in="SourceGraphic" in2="t" operator="in"/><feMorphology operator="dilate" radius="6"/></filter></svg>
<figure class="pxf__art" role="img" aria-label="Strand bij Scheveningen bij zonsondergang"><span class="pxf__sun"></span><span class="pxf__sea"></span><span class="pxf__pier"></span><span class="pxf__cap">Scheveningen</span></figure><span class="pxf__hint">hover om scherp te stellen</span></div>
</div>/* Pixelate SVG Filter · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.pxf{position:absolute;inset:0;background:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:'Switzer',system-ui,sans-serif}
.pxf__defs{position:absolute;width:0;height:0}
.pxf__art{position:relative;margin:0;width:min(72%,260px);aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#F5480F 0%,#f7a27f 52%,#f4f3f1 64%);cursor:crosshair}
.pxf__sun{position:absolute;left:58%;top:24%;width:22%;aspect-ratio:1;border-radius:50%;background:#fff4ec}
.pxf__sea{position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(180deg,#0a0a0a 0 5px,#2c2c2c 5px 9px)}
.pxf__pier{position:absolute;left:10%;bottom:30%;width:34%;height:9%;background:#0a0a0a;box-shadow:12px -14px 0 -2px #0a0a0a}
.pxf__cap{position:absolute;left:8px;top:7px;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.pxf__hint{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5)}// Pixelate SVG Filter · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pxf')||root;var art=root.querySelector('.pxf__art'),f=root.querySelector('#pxf-f');var fl=f.querySelector('feFlood'),co=f.querySelector('feComposite'),mo=f.querySelector('feMorphology');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var s=12,ts=12,hover=false,vis=true;function set(v){if(v<=1.2){art.style.filter='none';return;}var n=Math.round(v);fl.setAttribute('x',Math.floor(n/2));fl.setAttribute('y',Math.floor(n/2));co.setAttribute('width',n);co.setAttribute('height',n);mo.setAttribute('radius',Math.floor(n/2));art.style.filter='url(#pxf-f)';}
art.addEventListener('pointerenter',function(){hover=true;ts=1;if(reduce)set(1);});art.addEventListener('pointerleave',function(){hover=false;ts=12;if(reduce)set(12);});
set(12);if(reduce)return;if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;}).observe(root);
var t0=0;(function loop(t){if(vis){if(!hover){var ph=(t/1000)%5;ts=ph<2.6?12:1;}s+=(ts-s)*.08;set(s);}requestAnimationFrame(loop);})(0);
}
init(document.querySelector('.jouw-container'));More components
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 →