A frontend homage to the Japanese pop artist Takashi Murakami.
I became intrigued by the potential of the Document Object Model (DOM) and the utilization of div elements or SVGs for vector graphics. Being an artist who frequently employs vector graphics due to their scalability advantages, I had not yet experimented with SVGs within the realm of HTML. This sparked the idea of crafting a responsive rendition of Takashi Murakmie's jellyfish eyes, as depicted in the provided photos.
The eye is constructed using a combination of div and SVG elements and is interactive, responding to user clicks. Upon clicking, a random RGB code is generated to color the relevant element. A mechanic is implemented to track the user's actions in the background. After five seconds of inactivity, the mechanic triggers a playback of the recorded actions, restoring the eye's colors to their original state. That's the gist of it.
Visit the life demo to try it yourself.
- change element color
- rewind to original color
- add pause button
- add undo button
- add redo button
- add dragable menu
- add info button
- add save button
- optimization for mobile devices