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.Allowed HTML: <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="">

Discover more from Terence Eden’s Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading