Skip to main content
The 2024 Developer Survey results are live! See the results
3 of 5
cleaning up indendation
Alan H.
  • 16.4k
  • 17
  • 83
  • 114

You can pixelate images if you have the right "magic" displacementMap. Feel free to use the one referenced below (courtesy of Zoltan Fegyver). Please note that the sample code below has a displacementmap image hosted on a different domain. This won't work on Firefox - so for production code, you need the displacement map image served from the same domain as the source graphic's file.

(Firefox is first to implement the security measures from the forthcoming Filters 1.0 spec)

<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