> It reminds me that React hooks must start with "use," which is a very strange thing, no matter how they explain it. Additionally, I mention this because Vue 3/SolidJS, which also uses proxies, does not require you to use special file names; you can use it in any regular JS.

You can name hooks whatever you want. The `use` prefix is just a linting thing. Once transpiled to JS, there isn't really any way for React to know whether you prefixed your hook with `use`.

I understand the mistake though. The React docs state `You must follow these naming conventions` when talking about the `use` prefix. But that's all it is -- a convention.

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>

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!