mythical creatures illustrated
a fun Project
or read more about the process here
Scrolling through Tumblr I came across this fun Venn diagram combining the categories human, dog, horse, etc. and defining the intersecting parts as various mythical creatures. I really enjoyed the deep discourse between people arguing over what parts make up what animal. The creator of the Venn – Jez Kemp – also dives deep into this topic.
Illustrate all the cute creatures
Sharpen Webdesign skills
Sharpen FrontEnd Skills
Learn
Framer
Looking at all the intersections I wanted to cover, there were 37 different creatures. Many of them, especially the Greek ones, I already knew well (think Argus, Cerberus, Centaur, Satyr). However, Chinese and Mesopotamian mythology were new to me, so I had to dive in and read about the Uchchaihshravas (a seven-headed horse), the Lamassu (human-headed bull), or the obscure Myrmecoleon from the Middle Ages. After this research, I was ready for the next step.
I started with my sketchbook and drew 37 creatures.
Then I used Photoshop to remove the background and clean them up.
Next steps were to create SVGs for the Venn diagram and every intersection to create hover and click effects. Lining them up and coding to target the right layers took some time, but it was very satisfying seeing it all come together. It was also a great opportunity to get to know GitHub and GitHub pages and how HTML, CSS, and JavaScript work together. I am by no means a FrontEnd Dev, but playing around with it gave me a deeper understanding of many principles. The goal was to see if the concept of the different sections, which are clickable, is feasible and if I could code it as well.
Have a look at the first site, which is hosted on GitHub, here: https://hi-hannah.github.io/mythical-creatures/
or at the repo here: https://github.com/Hi-Hannah/mythical-creatures
For some time, I wanted to rework the project and make a mobile version as well. First, I made a small style guide in Figma.
After coming across Framer, I wanted to try out how far its capabilities reach regarding nested components and took the opportunity to rebuild the project in Framer. The interface was really enjoyable, especially how fast you can change things around without writing a lot of code – very helpful for building a solid and scalable layout system. On the other hand, relatively easy functions with custom code were difficult to rebuild or just very time-intensive (like the hover animation and event handling for clicks in SVGs).
My takeback is: Framer is great for sites with a relatively standard layout, that you want to build on and add content to easily. For more experimental sites, custom code still wins.
