Share My Creation [Web] Animated GenderChart Illustration

Hi Fam

GenderChart is a small, lightweight web component that animates two-icon SVG visuals to represent gender split in a visually engaging way. It uses SVG clip-paths and optional wave animations to show progress, growth, or target completion. The component is accessible, interactive, and easy to drop into any web page.

---

Features​

• Two modes: numbers and percentages
• Animated fill using SVG clip-paths and optional wave motion
• Lightweight: depends on SVG.js and a small component script
• Customizable icons (female-svg, male-svg) and colors
• Keyboard and click accessibility
• Programmatic API: start(), stop(), setters/getters for values
• Works with local or remote SVG paths (CORS permitting)

I have been working on an Address Book WebApp to introduce the b4x community to a SithasoDaisy5 Low Code Generator. So I thought having something like this for the address book gender split would be awesome.

This uses two fontawesome svg icons with removed inner color to reveal the outline. Then we use a water like loading

Numbers

Percentage

Related Content: Address Books with Different Back-Ends

[Web][BANanoSQL] Offline First Relational Address Book created with SithasoDaisy5 Low Code Generator

Hi Fam Download Source Code Access the Address Book on Vercel SithasoDaisy5 Low Code Generator 🏗️ Building an Offline-First Address Book with SithasoDaisy5 Low-Code Power In today’s fast-paced world, we expect our apps to work anytime, anywhere — even offline. That’s why I recently built a...

www.b4x.com

[Web][SithasoGoogleSheetsAPI] - Replace Traditional Back Ends with Google Sheets

Hi Fam! NB: Please note the technology discussed here can be used in JavaScript & also in BANano Projects. After a couple of days of planning and building SithasoGoogleSheetsAPI, its finally here. The Hidden Power of Google Sheets as a Database Imagine building full-stack web applications...

www.b4x.com

[Web][SithasoDaisy5] Full Stack LowCode Generated Address Book CRUD WebApp using PocketBase Back-End

Hi Fam Download Complete Deployable Project (Source Included) Here is it and 99% of the UI, Source Code has been done via the SithasoDaisy5 LowCode Generator. I kid you not. We have a dashboard, CRUD functionality and Excel Reporting. CRUD SCREENS Running An...

www.b4x.com

[Web][SithasoDaisy5] Low Code Generated CRUD WebApp using MySQL as Back-End via REST API (PHP)

Hi Fam Download Complete Deployable Project (Source Included) To run this WebApp, you will need a webserver running PHP. We use Laragon for development. You will also need BANano You will also need SithasoDaisy5, get it from this GitHub Repo This app has been developed using SithasoDaisy5 Low...

www.b4x.com

#SharingTheGoodness