一行代码实现小米的新logo

原创

秋风的笔记 2022-03-22 14:58:36 ©著作权

©著作权归作者所有：来自51CTO博客作者秋风的笔记的原创作品，请联系作者获取转载授权，否则将追究法律责任

<body>
    <img src="./mi.png" style="border-radius: 40%;">
    <img src="./mi.png" alt="">
</body>

一行代码实现小米的新logo_圆角

以下九十九个个是我随便画的圆角，其中有一个是原研哉设计的，谁能在一分钟之内把原研哉设计的包涵东方哲学、Alive、伟大的数学公式、生命的不停律动、少女的微笑、宇宙的律动、不同于人类生命体的萌生和退化的新logo找出来。

一行代码实现小米的新logo_数学公式_02

一行代码实现小米的新logo_圆角_03

源码

const length = 100;
    const fragment = document.createDocumentFragment();
    for(let i = 0 ; i<length; i++) {
        const img = document.createElement('img');
        img.src = './mi.png';
        img.style['border-radius'] = `${34 + Math.round(Math.random() * 5)}%`;
        fragment.appendChild(img);
    }
    fragment.children[Math.round(Math.random() * length)].style['border-radius'] = '40%';
    document.querySelector('.inner').appendChild(fragment);