Coding the Balance: Visualizing Gender Equity Through Frontend Art

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

Inspiration
For this challenge, I wanted to move beyond static images and use code to represent the weightless, yet powerful nature of equity. The concept is "Anti-Gravity Equity." In the tech industry, we often talk about the "glass ceiling." In this piece, I visualized the ceiling not just as a barrier to be broken, but as something that, once shattered, allows everyone to rise. I used floating elements and CSS animations to create a sense of weightlessness—representing a world where your gender doesn't "weight down" your career path.

The central focus is a balanced scale, built entirely with frontend logic (Flexbox and Grid), symbolizing that true balance is a deliberate architectural choice we make when building our communities.

My Code
The logic for the animations and the layout can be found in my repository here:

GitHub Repository: sithunitestings-source/Frontend-Art

I used a combination of:

CSS Keyframes: To create the drifting, anti-gravity effect for the UI components.

SVG & Clip-path: To design the "shattered glass" fragments that react to user interaction.

Flexbox: To ensure the "Balance" remains perfect across all screen sizes.