Skip to main content
The 2024 Developer Survey results are live! See the results
1 of 5
Michael Mullany
  • 31.3k
  • 6
  • 83
  • 107

You can pixelate images if you have the right "magic" displacementMap. Feel free to use the one referenced below (courtesy of Zoltan Fegyver)

<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600" color-interpolation-filters="sRGB">
  <defs>
            <filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
          <!--Thanks to Zoltan Fegyver for figuring out pixelation and producing the awesome pixelation map. -->
          
           <feGaussianBlur stdDeviation="2" in="SourceGraphic" result="smoothed" />
         <feImage width="15" height="15" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32648/pixelate-map-5.png" result="displacement-map" />
                    <feTile in="displacement-map" result="pixelate-map" />
                    <feDisplacementMap in="smoothed" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="50" result="pre-final"/>
          <feComposite operator="in" in2="SourceGraphic"/>
          
       
               </filter>
  </defs>

<image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>

Michael Mullany
  • 31.3k
  • 6
  • 83
  • 107