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.

Terence at Number 10 Downing Street

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.

Terence at Number 10 - the door number is obscured as is part of his face because the photo has been cropped in a circle

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:

The same photo - but with a red circular guideline superimposed

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!

What do you reckon?