Equity in Motion

🎨 From Bias to Balance — A Frontend Story of Gender Equity

Here’s my creative take on gender equity in tech using React + SVG.

💡 Concept

• Breaking systemic bias
• Equity over equality
• Rising together

🚀 Code

import { useEffect, useState } from 'react';

export default function EquityArtCreative() {
  const [balanced, setBalanced] = useState(false);

  useEffect(() => {
    setTimeout(() => setBalanced(true), 800);
  }, []);

  return (
    <div className="h-screen flex items-center justify-center bg-black">
      <svg width="600" height="500" viewBox="0 0 600 500">

        <defs>
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#1e3a8a" />
            <stop offset="100%" stopColor="#f472b6" />
          </linearGradient>
        </defs>

        <rect width="600" height="500" fill="url(#sky)" />

        <circle
          cx="300"
          cy={balanced ? 120 : 200}
          r="40"
          fill="#facc15"
          style={{ transition: 'all 1.5s ease' }}
        />

        <g
          transform={`rotate(${balanced ? 0 : -10}, 300, 320)`}
          style={{ transition: 'all 1.5s ease' }}
        >
          <rect x="150" y="300" width="300" height="20" fill="#1f2937" />
        </g>

        <rect x="180" y="260" width="50" height="40" fill="#ef4444" />
        <rect x="280" y="220" width="50" height="80" fill="#22c55e" />
        <rect x="380" y="180" width="50" height="120" fill="#3b82f6" />

        {[0, 1, 2].map((i) => {
          const baseY = [260, 220, 180][i];
          const lift = balanced ? 80 : 0;

          return (
            <g
              key={i}
              transform={`translate(${205 + i * 100}, ${baseY - lift})`}
              style={{ transition: 'all 1.5s ease' }}
            >
              <circle r="10" fill="#fff" />

              <line x1="0" y1="10" x2="0" y2="35" stroke="#fff" strokeWidth="2" />

              <line x1="-10" y1="20" x2="0" y2="10" stroke="#fff" strokeWidth="2" />
              <line x1="10" y1="20" x2="0" y2="10" stroke="#fff" strokeWidth="2" />
            </g>
          );
        })}

        {[...Array(15)].map((_, i) => (
          <circle
            key={i}
            cx={Math.random() * 600}
            cy={Math.random() * 200}
            r="2"
            fill="white"
            opacity="0.6"
          />
        ))}
        <text
          x="300"
          y="460"
          textAnchor="middle"
          fill="white"
          fontSize="18"
        >
          Equity lifts everyone differently — but fairly
        </text>

      </svg>
    </div>
  );
}