I am currently working on a project using SVG files and processing.js to develop a unique homepage that incorporates both animation and static elements. The concept is to maintain the overall structure of the original homepage but with varying colors, essentially creating an alternative version. I am seeking a way for this alternative design to subtly emerge as the mouse moves around, revealing itself only within a small area surrounding the cursor.
Has anyone encountered a method to achieve this effect? Due to the nature of SVG files, it presents some challenges.
My initial attempt involved utilizing an image along with the "drawing" element of processing.js in hopes of overlaying the alternative homepage on top of the original. Unfortunately, this approach resulted in the image being repeated wherever the mouse moved, rather than keeping the colors fixed in one position. I am looking for a solution where the alternate colors remain stationary while peeking through only in the immediate vicinity of the cursor.