In CSS Pen, each figure is drawn with CSS and gradually takes shape, evolving step by step. From logos to iconic shapes, every design is carefully crafted to show how it comes together visually through structured styling.
At first glance, it's a gallery of minimalist illustrations. But there's more: you can enable the code view, follow its evolution step by step, and even edit it to see what happens if you change something. An artistic, educational, and experimental experience, all at once.
There's also a back office where new figures can be created from scratch, customizing each step in real time. While not open to the public yet, it lays the foundation for future contributions and expansion. Additionally, when you share a figure, the URL includes a preview of the image, allowing others to see it before opening the link.
"A small change in code, a giant leap in form."
— Some developer excited about CSS
This project reflects how I have been adopting and applying new technologies, regardless of whether I was already familiar with them.
2017 MarStarted with Vanilla JS and pure CSS2019 MarRebuilt the project to use React2022 FebAdopted Supabase2022 MarIntegrated Tailwind CSS2022 MarDeployed on Vercel2022 MarRevamped UI now like Instagram Stories with CSS Grid2023 JulMigrated to TypeScript2023 JulSwitched to Next.js for enhanced performance
