As you all know, Xiaomi officially unveiled its new Logo at its spring product launch last night. According to the official introduction, the new Logo by the Japanese international famous designer Original Research zai design jointly create, millet brand vision into the Oriental philosophy of thinking, from the “relationship between science and technology and life”, put forward a new design concept.

Soon there was an article this morning saying that xiaomi’s official website had also changed its Logo. But the new Logo on the website doesn’t seem to have changed as much as the designer’s interpretation. Just changed the border-radius of CSS from 5px to 19px. Some netizens joked that Lei spent $2 million for nothing.

Reading this article, I got lost in thought and thought that the rounded rectangle drawn by border-radius must be different from the new Logo. Because border-radius, if set to 19px, means that the radius of the rectangle’s four corners is 19px, as shown in the following figure

Therefore, in the rounded rectangle made with border-radius, obvious broken corners can be seen at the connection between the rounded curve and the straight line, while the rounded rectangle of Xiaomi’s new Logo is a continuous rounded rectangle with smoother lines, as shown in the following figure.

So simply changing border-radius will definitely not restore the rounded rectangle of the new logo. After all, Hara yanzai also gave the unknown formula, if you want to perfectly restore the rounded rectangle of xiaomi’s new logo on the web page, you generally have to use Canvas or SVG.

But there’s actually an interesting way to do this, which is to introduce this interesting new API that allows you to restore this rounded rectangle, CSS style. That’s the Painting API, which is currently in draft form and is quite powerful enough to be worth checking out.

The CSS Paint API allows you to call the Paint () function and define a Paint Worklet through JavaScript. Think of it as a piece of code that allows you to programmatically draw anything you like. Because it’s JavaScript, you can make it dynamic. The API itself is very similar to HTML5’s API

The specific API, we can see the desert old wet this article zhuanlan.zhihu.com/p/39931190

According to the formula given by Yanya Hara, the new Xiaomi logo can be perfectly restored using CSS in conjunction with the Paint API.

zhuanlan.zhihu.com/p/30829138

This API provides lower-level CSS capabilities. Using this API flexibly, you can use CSS to draw any pattern you like