CSSHTML

New Xiaomi (Mi) Brand Logo from Pure CSS

Eirudo June 18, 2021 2491 0
HTML & CSS Version
Xiaomi Logo
Original logo image
Logo Options
Summary
New Xiaomi (Mi) Brand Logo from Pure CSS
Article Name
New Xiaomi (Mi) Brand Logo from Pure CSS
Description
Xiaomi (Mi) brand new logo, but made with HTML and CSS only. Also, the result is responsive.
Author
Publisher Name
Eirudo
Publisher Logo

Gak 100% mirip logo aslinya, tapi 99% mirip lah ya 😬
Dibuat menggunakan HTML dan CSS saja.

Logo Mi ini sudah responsive, tinggal atur width atau max-width aja
dan komponen di dalamnya otomatis menyesuaikan ;)

<!-- HTML & CSS Only Mi Logo (ya gini doang code HTML-nya) -->

<div class="erd-mi-logo">
  <div class="erd-mi-logo-squircle">
    <div class="erd-mi-logo-m"></div>
    <div class="erd-mi-logo-i"></div>
  </div>
</div>
/* CSS Variables, biar gak ribet ubah-ubahnya */
.erd-mi-logo {
    --mi-color: #e9620b;
    --mi-white: #fff;
    --mi-innerspace: 85%;
    --mi-radius-s: 17%;
    --mi-radius-l: 46%;
    --mi-radius-y: var(--mi-radius-l) var(--mi-radius-s);
    --mi-radius-x: var(--mi-radius-s) var(--mi-radius-l);
}

/* The Main Logo */
.erd-mi-logo {
    max-width: 300px; /* Change this width or just remove */
    display: block;
    position: relative;
    clear: both;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}
.erd-mi-logo:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 1;
}

/* Create Square-but-Circle Shapes. Entahlah apa namanya ini bentuknya */
.erd-mi-logo-squircle {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.erd-mi-logo-squircle:before,
.erd-mi-logo-squircle:after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: var(--mi-color);
    overflow: hidden;
}
.erd-mi-logo-squircle:before {
    height: 100%;
    width: var(--mi-innerspace);
    border-top-left-radius: var(--mi-radius-y);
    border-top-right-radius: var(--mi-radius-y);
    border-bottom-left-radius: var(--mi-radius-y);
    border-bottom-right-radius: var(--mi-radius-y);
}
.erd-mi-logo-squircle:after {
    width: 100%;
    height: var(--mi-innerspace);
    border-top-left-radius: var(--mi-radius-x);
    border-top-right-radius: var(--mi-radius-x);
    border-bottom-left-radius: var(--mi-radius-x);
    border-bottom-right-radius: var(--mi-radius-x);
}

/* Create letter M and I logo using <div>s */
.erd-mi-logo-squircle > div {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    padding-bottom: 38%;
    z-index: 1;
}
.erd-mi-logo-m {
    width: 43%;
    background-color: var(--mi-white);
    left: 20%;
    border-top-right-radius: 30%;
}
.erd-mi-logo-m:before,
.erd-mi-logo-m:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
}
.erd-mi-logo-m:before {
    background-color: var(--mi-color);
    bottom: 0;
    left: 22%;
    width: 56%;
    height: 78%;
    border-top-right-radius: 22%;
}
.erd-mi-logo-m:after {
    background-color: var(--mi-white);
    bottom: 0;
    left: 39%;
    width: 22%;
    height: 61%;
}
.erd-mi-logo-i {
    width: 10%;
    right: 20%;
    background-color: var(--mi-white);
}
 
ProjectNew Xiaomi (Mi) Brand Logo from Pure CSS
ByEirudo
DateJune 18, 2021
Made withCSS, HTML
CreditsOriginal logo concept by Xiaomi