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`.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F5d32de03-ec19-4e86-b658-235b956722df.mp4?alt=media&token=2923075c-ebf3-48ed-a6ed-cbc945f8c9ea","id":"5d32de03-ec19-4e86-b658-235b956722df","width":3000,"height":1678,"filename":"pixel-rounding.mp4","type":"video/mp4","caption":"Each pixel, has one corner with a rounded radius.","border":false}]}
```

Next, I created an array called `colors` containing Altana's brand palette. These will be used later to customize the avatar colors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F5c7a16c5-f54b-40b7-8081-1f586cc1ff61.png?alt=media&token=aef59be0-033d-48f2-a4ce-9cb644a0135a","id":"5c7a16c5-f54b-40b7-8081-1f586cc1ff61","width":2058,"height":1158,"filename":"colors.png","type":"image/png","caption":"Altana's brand accent colors","border":false}]}
```

Now, the Avatar is ready to be constructed, comprising of 9 `shapeComponents` arranged in a 3x3 grid pattern, randomly chosen using a `shuffleArray` function.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F358acb4e-9a4d-4a14-a2c5-23cc7a234c0e.png?alt=media&token=4ada8983-fa3b-41ef-ad73-59607593ef8f","id":"358acb4e-9a4d-4a14-a2c5-23cc7a234c0e","width":2744,"height":1128,"filename":"shape.png","type":"image/png","caption":"A 3x3 grid of pixels","border":false}]}
```

It then selects three random pixels on the grid and assigns them an accent color, which can also be user-defined if desired.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F84a04370-6642-4574-8fe7-0f7967009b44.png?alt=media&token=607331c4-db13-4e10-873a-4afe41decc9b","id":"84a04370-6642-4574-8fe7-0f7967009b44","width":2744,"height":1128,"filename":"random-colors.png","type":"image/png","caption":"Assign an accent color to 3 of the pixels ","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F72a70dd9-9103-40ad-8190-63162dc145c5.mp4?alt=media&token=561ad9e9-85c9-4c07-a7fa-61f18cc530da","id":"72a70dd9-9103-40ad-8190-63162dc145c5","width":2144,"height":1470,"filename":"final-result.mp4","type":"video/mp4","caption":"The final avatar component","border":false}]}
```

> [Here is a link](https://codesandbox.io/p/devbox/eloquent-panna-wyl7j2?file=/app/Avatar.js:107,1) 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.

Generating Unique Avatars

Product Designer

Altana using AI to map and analyze global supply chain with launch of next-gen Atlas

Customs and Border Protection Agents are using Altana's software to track down the precursor chemicals used in fentanyl production in Mexico, to help stop the drug from ever being created.

U.S. Border Patrol is using AI to crack down on fentanyl trafficking

Building a platform for the worlds largest enterprises, government agencies and logistic service providers to explore the global supply chain.

Search & Explore

Designing and implementing the design system that powers interfaces at Altana.

Cargo

Building a large language model-informed assistant that responds to questions posed in plain language.

Voayger

A super simple way to plan your day without overwhelming your calendar.

Time Blocker

A cathartic experiment that encourages people to let go of negative thoughts through  guided breathing.

Negative Thoughts

Can't decide something? Let math.random decide

Coin Flip

An afternoon project, prototyping how might we generate branded, unique avatars for users.

Avatars

A collection of guides that'll get you some smooth, well-balanced coffee to kick back with.

Simple Coffee Guides

A little tool that helps you benchmark a design against Dieter Rams’ ten principles of good design.

Is it good design?

After contracting with Altana via L+R I joined full time to continue helping build a shared source of truth for the global supply chain.

Senior Product Designer

My time at L+R was spent contracting with Altana building a canvas driven interface for the world's largest enterprises, government agencies and logistic service providers to explore billions of transactions and millions of companies.

Rebuilt a procurement marketplace and implemented a design system for a wealth management platform.

Started my career at Blue Stag, designing software, websites and brand identities for various clients.

Nathan Dorney

Work Experience

Projects

Side Projects

Education

Features

Teams

Contact