hbehrens / memfault_logo_anim

Memfault Logo as Animated SVG via CSS Variables and JS logic using GSAP

Animated Memfault Logo

Project for Memfault Awesome Day (MAD) project by @HBehrens. Renders the Memfault logo and provides some animations and interactions.

Try it out now! This project was heavily inspired by Gitpod's former loading screen ❤️

How does it work

The logo is technically a 2D SVG with several nested groups each with individually configured CSS transforms. Careful placement of SVG clipping paths that are transformed in sync creates the desired effect.

JavaScript performs logic and drives value changes for various CSS variables using GreenSock. Various calc() expressions in the CSS will apply these variables leading to the visual effects without making any changes to SVG itself.

The example further responds to pointer events (touch or mouse) to give the illusion of a truly three-dimensional object.

Next Steps

• Publish to Github Pages
• Clean up horrible source code
• Re-package as React component to be used in Memfault's UI
• Hire awesome talent for open positions in Berlin/EU