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!


Share this post on…

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">

OSZAR »