🖋️ Animated Splash Screen

Lessons Learned   |    Technologies

This project is a proof of conceipt to develop a splash screen for SPA's (single page applications) using inline SVG and CSS, with cool and performant animations to make the application loading fun and less painful 😜.

DISCLAIMER: The brand/logo "Poseidon" does not represent an existing product. It was developed for the purpose of this PoC alone.

Check out the page running!

🏆 Lessons Learned

• Creating CSS @keyframes to define custom and multiple animations to HTML elements;
• Selecting SVG pieces (<path /> tag) and applying animations separately to each one;
• Using browser devtools to manipulate CSS properties and define animations states;
• CSS properties related to animation and transform to create performant transitions;
• CSS pseudo selector :empty, to transition the splash screen to the SPA when it has finished loading;

🚀 Technologies & Resources

• HTML
• SVG
• CSS

---

🌟 Feel free to submit pull requests to improve this project.