≡ Menu

Designing default avatars with polygonal backgrounds

Whoever started the trend (later made popular by Google), today the default user avatars are usually represented by their name initials inside a colored circle.

While redesigning avatars for smartQ workflow management tool, we decided to spice it up a bit by adding a simple background pattern to the colored avatar circles. Here is the result:


We started with a low poly background, to keep the design flat and modern. There are many tools for creating low poly art. SVG was our format of choice as a vector format, so it’s retina-friendly and scales nicely.

We did not want the pattern to be the same for each avatar, so we started with a larger polygonal frame, then applied a circle mask to it. By moving the mask coordinates an infinite number of background variations can be created:

Grayscale polygonal vector background

Grayscale polygonal vector background

We started with a grayscale  background and added colors to it via a color layer on top of the polygon background, then we blended it using CSS Blend Modes. After a few experiments, we found that the “overlay” mode worked the best (mix-blend-mode: overlay). The result is below:

See the Pen Default avatars with polygonal background by Dis (@Dis) on CodePen.light

It does not work in IE/Edge, where it simply degrades to the traditional flat color avatars.

It is a light solution, no JS involved (though it can be used to randomly generate colors and mask positions). It also does not add much to the download time, since low-poly SVGs are small (you can also use a smaller SVG frame, compress it, and even use background rotation for more avatar background variations).

The resulting default avatars look familiar, yet have a new element to them.

{ 0 comments… add one }

Leave a Comment