Coding the Balance: Visualizing Gender Equity Through Frontend Art

Source: Dev.to

WeCoded 2026: 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.