Pixelization with SVG Filter

index.html

<!-- Inspired by https://codepen.io/eeeps/pen/dqepQm -->

<svg viewBox="0 0 800 532">
  <filter id="pixels" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<feFlood flood-color="green" flood-opacity="1" x="0" y="0" width="1" height="1" result="flood"/>
	<feComposite 
      id="composite"
      in="SourceAlpha" in2="flood" operator="in" x="0" y="0" width="6" height="6" result="composite"/>
	<feTile x="0" y="0" width="1000" height="1000" in="composite" result="tile1"/>
	<feComposite in="SourceGraphic" in2="tile1" operator="in" result="composite1"/>
	<feMorphology 
    id="morphology"
    operator="dilate" radius="2" in="composite1" result="morphology"/>
  <feColorMatrix 
    id="colormatrix"
    type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="morphology" result="colormatrix"/>
</filter>
  
	<image 
    id="image"
    x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://ic.pics.livejournal.com/yoksel/1816728/2403141/2403141_original.jpg" filter="url(#pixels)"></image>
<svg>

pixelization-with-svg-filter.markdown

Pixelization with SVG Filter

Inspired by https://codepen.io/eeeps/pen/dqepQm

A Pen by yoksel on CodePen.

License.

script.babel

const composite = document.querySelector('#composite');
const morphology = document.querySelector('#morphology');
const image = document.querySelector('#image');

const min = 2;
const max = 20;
let counter = min;
const step = 4;
let direction = 'forward';
let imagesCounter = 0;
const pausa = 2; // seconds

const images = [
  'https://ic.pics.livejournal.com/yoksel/1816728/2403141/2403141_original.jpg',
  'https://ic.pics.livejournal.com/yoksel/1816728/2404025/2404025_original.jpg',
  'https://ic.pics.livejournal.com/yoksel/1816728/2415467/2415467_original.jpg',
  'https://ic.pics.livejournal.com/yoksel/1816728/2450837/2450837_original.jpg',
  'https://ic.pics.livejournal.com/yoksel/1816728/2454600/2454600_original.jpg',
  'https://ic.pics.livejournal.com/yoksel/1816728/2454000/2454000_original.jpg'
]
 
function changeSeed() {
  if (counter <= min) {
    image.setAttribute('filter', 'url(#pixels)');
  }
  
  if (direction === 'forward') {
    counter += step;
    
    if (counter >= max) {
      direction = 'backward';
      image.setAttribute('xlink:href', images[imagesCounter]);
      imagesCounter++;
      
      if(imagesCounter === images.length) {
        imagesCounter = 0;
      }
    }
  }
  else {
    counter -= step;
    
    if (counter <= min) {
      direction = 'forward';
    }
  }
  composite.setAttribute('width', counter);
  composite.setAttribute('height', counter);
  morphology.setAttribute('radius', Math.ceil(counter / 1.95));
  colormatrix.setAttribute('values', 1 - counter / max);
  
  let time = 75;
  
  if (counter <= min) {
    time = pausa * 1000;  
    image.setAttribute('filter', 'none');
  }
  
  setTimeout(changeSeed, time);
}
 
window.requestAnimationFrame(changeSeed);

style.scss

HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 800px;
  height: 532px;
}