Contexto
Busqué posibles respuestas a esta pregunta y encontré soluciones que utilizan el filter: invert(...) ( ejemplo ) para invertir los colores de una imagen al pasar el mouse. Sin embargo, la funcionalidad que esto proporciona es particularmente limitada. Para ver un ejemplo de lo que estoy tratando de lograr, hay un ejemplo en este sitio o esta demostración de grabación de pantalla , que se puede ver al pasar el mouse sobre una de las miniaturas de la página. Al pasar el mouse, la imagen dada cambia a una representación invertida y luego en blanco y negro, aunque en una mirada más cercana parece que solo ciertos colores se invierten durante esta transición; observe cómo el azul en el estado no activo no se invierte a rosa/naranja cuando se cierne sobre. Parece que solo los colores en un rango determinado experimentan esta inversión, de modo que la inversión proporciona solo un efecto azul/verde azulado durante la transición.

Aclaración de problemas
Por lo que puedo decir, hay un par de piezas complejas clave en este sentido:

• Animar un cambio en la representación de color de una imagen varias veces (color -> invertido -> blanco y negro)
• Aplicar selectivamente dicho efecto a un rango limitado de valores de píxeles específicos (ciertos colores)

Pregunta
Aprecio que esta sea una pieza de funcionalidad particularmente específica, pero estoy buscando obtener una comprensión más profunda de este estilo más complejo de manipulación de imágenes. Parece que CSS es claramente demasiado limitado para poder proporcionar esta funcionalidad, lo que me da una indicación de que este es un efecto que depende en gran medida de javascript, y potencialmente requiere el uso de un elemento de lienzo como lo usa el sitio web de ejemplo, pero no estoy seguro de cómo hacerlo. Encuentre más información sobre cómo funciona esto o los principios utilizados. Entonces las preguntas son las siguientes:

• Si es posible, ¿alguien puede proporcionar un pequeño fragmento de código que proporcione un pequeño ejemplo de esta funcionalidad dada?
• De lo contrario, ¿alguien puede proporcionar ideas sobre la lógica subyacente de esta funcionalidad, las bibliotecas que brindan una forma de realizar esta manipulación o cualquier otro recurso que pueda ayudarme a comprender mejor y analizar cómo implementar este efecto?

Gracias por adelantado