When I began designing the home page to this site, I lacked any sort of direction. I’d never worked with SVGs before and hardly knew what they were, but I’d seen the “Export to SVG” option in Illustrator and that piqued my interest.

Once I’d created the SVG design in Illustrator (which was just seven black polygons), I exported to HTML and played around with the “fill” attribute to have an image from each project fill a respective shape. This then led to the idea of filling the shapes with a GIF on hover and, after much experimentation, I realized that I could use the shapes collectively as a screen. This screen displays a single GIF from the project associated with the shape being hovered over. All of this is accomplished by changing the “fill” attribute using jQuery.

The only gripe I have with this idea is that GIFs can often be hefty in file size (relative to other web elements), even after shortening and optimizing them. This sometimes caused the functionality of the interface to lesson as well; the transitions slowing down and breaking occasionally. I remedied this (mostly) by loading the GIFs on page load, even though this does increase the loading time. Hopefully I will be able to improve this interaction in the near future without having to compromise loading time or image quality.

At the moment, having the shapes link to the relevant pages isn’t working. It works in the jSFiddle below, but not on the live site. I have a feeling this may have something to do with limited SVG support on my site, but I’m not sure yet.

My work on this project can be found here:

https://jsfiddle.net/ijdonnelly11/r50t9er5/79/

(Note: The fiddle doesn’t have a preloader, so it may take a few seconds for the GIFs to load and be fully functional)