Figma, Illustrator, Rive
Interactive Web Illustration
4 weeks
From Static Art to Dynamic Myth: Illustrating the Nine-Tailed Fox with Basic Rive Animation
This case study details the process of animating a Nine-Tailed Fox (Hu Li Jing 狐狸精), a figure central to East Asian mythology, using Rive. The primary objective was to breathe life into a richly illustrated 2D character.
I focused on leveraging fundamental Rive tools, such as Constraints, Simple Transforms, and basic State Machine logic to achieve a convincing sense of breathing, tail movement, and subtle character expression.
Research:
Classic of Mountains and Seas
An ancient Chinese compilation of myth, geography, botany, and folklore, traditionally compiled between the 4th century BCE and the 1st century CE.
Unlike later depictions of the fox as a seductive demon, in the Shan Hai Jing, the Nine-Tailed Fox is primarily presented as a creature of good omen that is associated with prosperity and peace.
Anonymous. The Classic of Mountains and Seas. Translated by Anne Birrell, Penguin Classics, 1999.
DESIGN PROCESS
From Initial Ideas to Narrowing the Scope
Idea I: Mid-Autumn Lantern Festival Rhythm Game
Too large of a scope to complete within time constraints
Large learning curve for making a game in a software that I learned 1 week ago
Idea II: Mythological Creatures around the World
Also a very large project scope for a short time frame
Idea III: Mythological Cats around the World
Idea IV: East Asian Mythological Animals
Idea V: Nine-tailed Fox
What is the opportunity?
To create a story through interaction, pushing beyond the limits of static design.
Animating and connecting those animations with human interaction, subtle movements, and illustration that immerses the user through a mystical bamboo forest.
DESIGN PROCESS
Ideas and Conceptualization
Ideating initial sketches to translate to workflow for execution
Rhythm game layout and function
Simplifying the rhythm game for easier execution and time management
Changing idea due to time contraints
Research and design decisions for Nine-tailed fox character design and background
DESIGN PROCESS
Assets: Evolving my idea
The first iteration was messing with Rive features: bones, Booleans, conditionals, etc. This is a cat from my initial idea to implement animations and interactions.
My strengths lie in illustration, however, at this point, I was to change my idea again because I lacked the amount of time for me to finish all illustrations and give them individual animations. In other words, my idea was too grand for the time limits of when the project needed to be done.
DESIGN PROCESS
Background
I took inspiration from the settings described in Chinese mythological literature, using colors that contrast each other for a more mystical effect. The fog is an overlay that moves with your mouse.
DESIGN PROCESS
The Character
I took inspiration from character designs in a game, but mostly from a hanfu dress (traditional Chinese dress). The white color is a symbol of the purity and color of the nine tailed fox.
SOLUTION AND CONCLUSION
Technical and Visual Design Quality
The flowing lines of the nine tails create a sense of movement and energy, even in a static image. They are positioned to add drama and balance, preventing the composition from feeling top-heavy.
The use of vibrant cyans and pinks contrasts sharply with the deep blues, purples, and blacks of the background and surroundings. This contrast makes the fox pop and gives the illustration a rich, mystical atmosphere.
The shading on the fox's body and tails gives it a three-dimensional texture. The highlights on the fur and the subtle rim lighting suggest a light source, adding depth and realism to the stylized subject.
Cultural and Storytelling
The work is high quality because it is ready for animation. The complexity lies in the subject's multiple, distinct elements (the nine tails), which creates a perfect opportunity to showcase advanced, coordinated motion using basic Rive techniques like bone rigging, hierarchical organization, and keyframed offsets to achieve complex, cascading movement.
Final Thoughts and Reflections
This was a last minute attempt to narrow down my prior ideas to something I could simplify within a matter of days. I underestimated how long focusing on a project would take, thus changing my grand idea to something more doable in my comfort zone for the time being.
In the future, I would definitely work with Rive's animation states more than done in this project because I lacked the ability to efficiently create quality assets in time for a tight deadline.
I see this as an opportunity to the awareness of realistic ideas and my skill level with a new software to take time out of a constrained project and expand upon my initial ideas, giving me more flexibility. I ended up prioritizing the quality of the core asset and fundamental motion over complex interactivity, focusing on rigging, keyframing, and vector optimization.
Corina Lougie
corina.lougie@gmail.com
