Hello, I am wondering what is the best way to create the following animation:
I want to create an animated hero size image that animates. Basically a large box filled with triangles that are changing color with two functions. One - a slow function affecting every triangle in the box randomly, and two - changing color with a greater frequency within some range of the mouse cursor as it moves across the image.
I can think of a few ways to possibly get started but I am not sure the best way to go about it, and why.
1. Create the divs in html, using css grid and then use box sizing with large border size to create many triangle shape appearance. and use event handlers to add classes to the borders for color change on hover.
2. Use java script to manipulate the DOM with iterations - fill a set space (no css grid). Then still add classes to the border for the color change.
3. Create an svg in a vector drawing program. Animate.
Either way I plan on using media queries to create three distinct looks at different screen sizes.
I appreciate any thoughts or feedback.