|
|
|
|
|
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>
|
|
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.