Create Clubhouse-like avatar using CSS

Inspired by CSS Houdini API

Credit: Unsplash Avatar

If you want to know why all Clubhouse avatar looks different (or maybe visually nicer) from your regular border(corner) radius design, you may read this article from Hackernoon and this article to get familiar with the concept of Squircle.

I assume you already have a basic understanding of Superellipses and also common knowledge of Web frontend technologies before you proceed to the remaining sections.

Fun fact: Xiaomi spent 2 million CNY to rebrand their logo from a slightly rounded square to a Superellipse. Watch Kenya HARA’s explanation.

0x0: Intro

The approach of creating Superellipses using CSS is utilizing the CSS Houdini API to customize the way your browser CSS Engine renders a DOM element.

To be a little more specific, this approach uses the CSS Painting API and creates a mask on top of the DOM element.

Do note that only Chromium browsers are able to support this feature at the moment.

0x1: Import

In order to tell your browser how to render Superellipses, you need to use some Javascript. Fortunately, there are already well-written scripts out there that are ready to use.

You can import and add the module to your CSS Engine paint worklet like this:

<script>
if (CSS && "paintWorklet" in CSS)
  CSS.paintWorklet.addModule("https://unpkg.com/smooth-corners");</script>

If you want to learn more about paint worklet and how the modules work, you can read this MDN Documentation.

0x2: Applying smooth-corners

Let’s say you have a class named .el , you can apply the smooth corner using

mask-image: paint(smooth-corners);
--smooth-corners: 3;

You can modify the --smooth-corners value to change the Superellipse shape.

n = the value of smooth-corners

.el {
  background: url(https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) no-repeat;
  background-size: 300px 300px;
  border-radius: 60px;
  height: 300px;
  width: 300px;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  --smooth-corners: 3;
}

0x3: Browsers Compatibility

Yes, this feature is only supported on Chromium browsers. In order to ensure the rounded appearance is also visible on Safari, Firefox, and other browsers, you may need to specify and keep the border-radius property.

0x4: Refactoring CSS

To improve your CSS readability, you may utilize the CSS `supports` rule.

@supports (mask-image: paint(smooth-corners)) {
  .el {
    mask-image: paint(smooth-corners);
    --smooth-corners: 3;
  }
}

0x5: References

GitHub - wopian/smooth-corners: CSS superellipse masks using the Houdini API

CSS Houdini | MDN

PaintWorklet - Web APIs | MDN