The latest articles on Forem by Nick Watton (@nickwatton). https://forem.com/nickwatton https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F428308%2F161861e1-a427-4555-8187-b4f3e945f7fa.jpeg https://forem.com/nickwatton en Nick Watton Sun, 22 Mar 2026 11:08:06 +0000 https://forem.com/nickwatton/gender-fluid-5d3 https://forem.com/nickwatton/gender-fluid-5d3 <p><em>This is a submission for the <a href="https://dev.to/challenges/wecoded-2026">2026 WeCoded Challenge</a>: Frontend Art</em></p> <h2> Show us your Art </h2> <p><a href="https://es-d-5551804820260324-019d0c29-c323-78f6-a80d-100e8bb732d3.codepen.dev/" rel="noopener noreferrer">Gender Fluid - a CodePen animation</a></p> <h2> Inspiration </h2> <p>I made this interactive animation of gender flags in celebration of my trans son.<br> I have always tried to be an advocate and ally for gender equality and gay rights, and am so proud of my boy who has the courage to present themselves to the world on their terms.</p> <h2> My Code </h2> <p>You can see all the code, edit and make your own version on CodePen. At its heart this is a particle system. I hope you find my version useful.<br> <a href="https://codepen.io/editor/2Mogs/pen/019d0c29-c323-78f6-a80d-100e8bb732d3" rel="noopener noreferrer">https://codepen.io/editor/2Mogs/pen/019d0c29-c323-78f6-a80d-100e8bb732d3</a><br> If you <em>do</em> find it useful, I would love to get your comments and see what you make.</p> <p>As a public CodePen this is <a href="https://opensource.org/license/MIT" rel="noopener noreferrer">MIT Licensed</a>. <br> Feel free to use the code and I hope it helps you learn :) </p> wecoded devchallenge frontend css