Breaking Barriers with Code and Creativity

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Show us your Art

I created an interactive “Shattering the Glass Ceiling” animation using HTML, CSS, and JavaScript. The piece symbolizes breaking barriers in tech, with a dynamic ceiling that cracks and shatters as diverse silhouettes rise upward.

Live demo: Shattering Glass Ceiling App

Inspiration

My inspiration came from observing the gender inequities in the tech industry. Women and underrepresented groups often face invisible barriers despite talent and ambition. I wanted to visualize progress, empowerment, and collective growth. Each animated figure represents different backgrounds, emphasizing that equity in tech is a shared journey, not an individual fight.

The “glass ceiling” cracking effect reflects both the challenges and the triumphs of breaking systemic barriers. The rising silhouettes embody hope, action, and the ongoing push for inclusivity.

My Code

I used HTML5 Canvas, CSS animations, and JavaScript to create an interactive experience where users can click to shatter the ceiling and watch the characters rise.

GitHub Repository: https://github.com/Tanya-garg10/wecoded-frontend-art.git

javascript
// Sample snippet from the project
const ceiling = document.getElementById('ceiling');
ceiling.addEventListener('click', () => {
  ceiling.classList.add('shatter');
  riseFigures();
});