Here's a quick walkthrough of how I prototyped a React Avatar component with the goal of generating hundreds of thousands of unique avatars.
To begin, I defined four shape components: TopLeft, TopRight, BottomLeft, and BottomRight, each shape essentially represents a pixel with one rounded corner. These components are organized within an array called shapeComponents.
Next, I created an array called colors containing Altana's brand palette. These will be used later to customize the avatar colors.
Now, the Avatar is ready to be constructed, comprising of 9 shapeComponents arranged in a 3x3 grid pattern, randomly chosen using a shuffleArray function.
It then selects three random pixels on the grid and assigns them an accent color, which can also be user-defined if desired.
The Avatar can now be rounded off and will generate a unique pattern and color combination. The result? An Altana-branded avatar ready to represent each user with a touch of individuality.
Here is a link to the 'final' code, please note this is not production ready! just a quick and dirty prototype to test the concept, I'd love to hear how you might improve it.