Previewing Circular Avatars

Play with the demo

I was lucky enough to go to Number 10 Downing Street for a meeting a few weeks ago. A perfect opportunity for a photo of me by that famous door.

Being the vain man that I am, I wanted to set it as my avatar photo. But Twitter and other social networks now use circular avatars.

The "10" has been obliterated and part of my head is missing.

So I've created a quick way to preview avatar images to see how they'll look on both squares and circles. It places a simple overlay on top of your image - like so:

Images can be panned around and zoomed using the mouse.

You can play with the demo

This is only a Minimum Viable Prototype - pull requests welcome!