Hacker News new | ask | show | jobs
by tommyquant 907 days ago
This is pretty much what the author is looking for. Here is my version with some optimizations and using 5x5 cells:

  <div id="comparator">
    <img src="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home.png" alt="">
    <img src="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home.png" alt="">
  </div>
  
  <svg xmlns='http://www.w3.org/2000/svg'>
    <filter id='pixelate'>
      <!-- Perform two 1D blurs (vertical and horizontal pass). This is a more efficient way of doing a 2D box blur -->
      <feConvolveMatrix order="5 1" kernelMatrix="1 1 1 1 1"/>
      <feConvolveMatrix order="1 5" kernelMatrix="1 1 1 1 1" result="blur"/>
  
      <!-- Generate tiling pattern  -->
      <feFlood x="2" y="2" height="1" width="1"/>
      <feComposite width="5" height="5"/>
      <feTile/>
      
      <!-- Combine tiling pattern and blurred image -->
      <feComposite in="blur" operator="in"/>
      
      <!-- Dilate each pixel to fill each cell of our pixelation grid -->
      <feMorphology operator="dilate" radius="2"/>
    </filter>
  </svg>
1 comments

That is the closest so far I think. It is interesting that the filter blurs raster images differently than it does a block of text. I applied your filter on this page: https://svg-video-filters.glitch.me/index-2.html. I had to add `x="0" y="0"` to <filter> to make it work.

What are the attributes in the tiling patterned supposed to do? Changing them seemed to have no effect on the image in my test page.

The attributes in the tiling pattern are for isolating the middle pixel in every cell. Consider a 5x5 cell. The middle pixel would be x=2, y=2. The width and height being 1 is so that we only isolate a single pixel.

The reason for isolating the middle pixel is because it is the only pixel in the cell that contains the average color of the cell (after box blurring). Once isolated, we can use feMorphology to dilate this pixel so that it fills the cell.

Here is a React version to more clearly demonstrate the relationship between cell size and all of the attributes: https://codepen.io/tommyquant/pen/yLwyoGO

That is great! Trying it out in my test harness didn't work, but apparently there was an extra <def> surrounding all of my filter definitions that caused a problem, but only with this one filter. Thanks for the explanation!