Reference: www.bilibili.com/video/BV1V6… Juejin. Cn/post / 694581…

Codesandbox.io/S/Cranky-NA…

Without further ado, let’s create an HTML:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>mi logo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    (CSS.paintWorklet || paintWorklet).addModule("logo.js");
  </script>
</html>

Copy the code

The ultra elliptical border of mi logo is implemented with CSS paintWorklet. Specific implementation method at the conference Lei told us.

|x|^3 + |y|^3 = 1
Copy the code

Directly on the code:

//eslint-disable-next-line
registerPaint(
  "logo".class {
    paint(ctx, size) {
      ctx.fillStyle = "rgb(255, 94, 26)"; / / millet orange

      const n = 3;
      ctx.beginPath();

      // Map the coordinates of the div points to the unit box based on the width and height of the div.
      const AxisX = (x) = > ((x - size.width / 2) / size.width) * 2; 
      const AxisY = (y) = > ((y - size.height / 2) / size.height) * 2;

      for (let i = 0; i < size.width; i += 0.5) {
        for (let j = 0; j < size.height; j += 0.5) {
          if (Math.abs(AxisX(i)) ** n + Math.abs(AxisY(j)) ** n < 1) {
          / / traverse each point, if the normalize point meet | | x ^ 3 + | y | ^ 3 < 1 point up this color
            ctx.fillRect(i, j, 0.5.0.5); } } } ctx.closePath(); ctx.fill(); }});Copy the code

#root {
  background: paint(logo);
  width: 100px;
  height: 100px;
  position: relative;
}

Copy the code

I’ve drawn the frame here. The rest of MI 100w can be implemented with pseudo-class + shadow:

CodingStartup: juejin.cn/user/249773… There are great CSS articles. The realization of the MI also follow his video: www.bilibili.com/video/BV1V6…

// Make a square, set the position and rounded corners, and remove the bottom edge#root::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 35px;
  left: 14px;
  top: 25px;
  border: 1px solid #fff;
  border-left: 12px solid #fff;
  border-right: 12px solid #fff;
  border-top: 10px solid #fff;
  border-bottom: 0;
  border-radius: 0px 20px 0px 0px; } // To draw the M in the middle and the right of the MI.IIt's made up of two small vertical shadows.#root::after {
  content: "";
  position: absolute;
  background: #fff;
  width: 13px;
  height: 25px;
  left: 35px;
  top: 45px;
  box-shadow: 40px -18px 0px #fff.40px 0px 0px #fff;
}

Copy the code

Emmm is simply done here. You say thunder total this 200W flower value is not worth šŸŒ