go back

Placeholder for post cover image
Cover image for post

Generative minimal tattoo patterns 🪩

April 10, 2022

I'm a huge fan of Okan Uckun's work with minimal line designs, they'd make for a great tattoo one day. Here are a couple of examples:

Their art is subtle and beautiful (& I'm a sucker for tasteful minimal design 😌). I wanted to replicate some of the simpler designs with CSS and allow them to generate themselves with some JS, and this was the result!

[bryce.io/tatterns](https://bryce.io/tatterns) (short for tattoo patterns)

GitHub logo brycedorn / tatterns

Generative minimal tattoo patterns 🪩


Tech notes

Some things I learned along the way 👨‍🏫

Smooth animations how? 🧐

Relying primarily on transform: translate and transition: transform would overload the GPU. Instead I used position, which trades smoother, more expensive transition animations for much cheaper animations. After experimenting with both methods this performed better on both my M1 Macbook Pro and an older Intel Macbook Air when regenerating the full page of patterns.

The browser is recalculating layout each time a pattern's internal state is updated, but this calculation is still cheaper than hundreds (or thousands) of individual GPU threads to handle complex translations! I may do more research into this as it was interesting how relying on browser recalculation was faster than offloading to GPU, which I presumed would be faster.

What's next?

Not really sure, just made this for fun. I may add more geometry for additional pattern possibilities. Maybe one day I'll use it for a gallery wall with a projector? Or make some NFTs? Who knows. Thanks for reading and share any patterns that you like in the comments!

go back