Context
When I started at Patreon in March 2017, my first project was to help rebrand the whole product by June 2017. This included assisting in the tech migration from an Angular frontend stack to React, rebuilding the styling in the website to use styled-components instead of straight up CSS, and replacing colors, fonts, the logo, wordmark, and icons.
I actually tech led the creation of our design system in React, aptly named Studio.
The project was a mess and a half with a lot of late nights. However, in the chaotic mess that was the rebrand project, Jason Byttow and I were able to slip in a fun new 404 page design.
Patreon & Foxes
There was once a designer at Patreon named Kathy. She loved foxes and even had a tumblr in which she drew a fox a day. Since she was one of the first designers at Patreon, she brought her love of foxes to the platform and Patreon has a light fox mascot. 4xx and 5xx pages were fashioned with foxes, and the default avatar for patrons and creators are procedurally generated fox illustrations.
This was Kathy's original 404 page design:
 |  |
Techniques
The rebranded Fox was illustrated in Adobe Illustrator, with each body part as a group. CSS keyframe animations were applied to each body part, the most commonly used CSS property being transform: rotate(...). Each body part is on a regular schedule, but some are complicated with properties being defined at every 1-5% keyframe. That makes it appear more random than it is.
The only part that is truly randomized on the fox is the eyes, which uses a JavaScript randomizer function to apply and remove a class that changes the height.
The spaceship is also on clockwork keyframes, rotating around a single point, and additional rotations around its own center to appear rickety.
A Rogue Merge Becomes a Fan Favorite
When Patreon was doing it's rebrand, the error pages were not part of the scope. Jason and I took advantage of that to go a little rogue and make a green field project out of it. We wanted to stay true to the fox theming of Patreon that Kathy laid out before us.
You can see the page live on the Patreon website.
While the rebrand itself was highly controversial, at lease the reception of the 404 page upon release was pretty positive! You know you did a good job when your random project is tweeted by the company account!
 |  |
 |  |
Never Enough Foxes
Even though this project was totally rogue and merged in secret, the new fox design was much beloved internally. I ended up also illustrating the fox for our maintenance page and for our creator onboarding flows. Here's a couple samples: Construction Foxy and Interview Foxy.
 |  |