Ещё одну интересную демку нашёл. Джей Томпкинс собрал SVG-фильтр, который превращает обычную фотографию в пиксельную. Причём в демке можно поиграться с размером тайла, точкой старта, применяемым фильтром.
Как оно работает:
Шаг 1. При помощи
feFlood, feComposite и feTile создаём паттерн, где однопиксельные белые точки расположены в сетке 10x10.Шаг 2. При помощи ещё одного фильтра
feComposite смешиваем паттерн и картинку. Вместо белых пикселей теперь получаем пиксели с цветами из оригинального изображения. Но всего 1% этих пикселей, остальные чёрные.Шаг 3. Применяем
feMorphology с оператором dilate, чтобы «раздуть» пиксели во все стороны. Можем задавать радиус, чтобы сделать либо эффект мозаики, либо эффект LED-пикселей на чёрной подложке.На самом деле для меня это всё ещё некоторая магия, но чем больше смотрю таких демок, тем лучше их понимаю и уже даже могу что-то сам воспроизвести, подглядывая. Фильтры в SVG — мощь.
https://codepen.io/jh3y/pen/pvyZZmO
