Open toFrankie opened 8 months ago
说到「超椭圆 Superellipse」可能很多人不了解，但小米于 2021 年 3 月 30 日发布的全新 LOGO 很多人不陌生。没错，它就是超椭圆的一个例子，长这样 👇
当时雷总刚开完发布会，小米旗下的网站还没来得及更换全新的 LOGO，然后开发同学直接拉了个 border-radius 为 19px 的圆角（没记错的话）还被各大网友调侃，哈哈。现在已经换上了一个 SVG 图形。
border-radius
19px
<svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 808 808"> <g> <path fill="#ff6900" d="M723.79,84.42C647.55,8.48,537.94,0,404,0,269.89,0,160.12,8.58,83.92,84.72S0,270.43,0,404.39,7.74,648,84,724.14,269.9,808,404,808s243.85-7.71,320-83.86,84-185.78,84-319.75C808,270.25,800.16,160.54,723.79,84.42Z"></path> <path fill="#fff" d="M374.26,553.72a5,5,0,0,1-5.06,5H300.3a5.05,5.05,0,0,1-5.12-5V373.53a5.05,5.05,0,0,1,5.12-5h68.9a5,5,0,0,1,5.06,5Z"></path> <path fill="#fff" d="M509.18,553.72a5.05,5.05,0,0,1-5.09,5H438.5a5,5,0,0,1-5.1-5V398.26c-.07-27.15-1.62-55-15.64-69.06-12-12.09-34.51-14.86-57.88-15.44H241a5,5,0,0,0-5.07,5v235a5.07,5.07,0,0,1-5.12,5H165.16a5,5,0,0,1-5.06-5V254.31a5,5,0,0,1,5.06-5H354.52c49.49,0,101.22,2.26,126.74,27.81s27.92,77.3,27.92,126.85Z"></path> <path fill="#fff" d="M644.29,553.72a5.06,5.06,0,0,1-5.09,5H573.57a5,5,0,0,1-5.08-5V254.31a5,5,0,0,1,5.08-5H639.2a5.06,5.06,0,0,1,5.09,5Z"></path> </g> </svg>
CodePen
在大学时期，那会做小米主题接触到超椭圆，然后就迷上了。在以前，iOS 的应用图标总是要比 Android 好看一些，原因就在它圆角上。当然，现在看国内几家系统都已经用上了，爽！
简单来说，它比普通圆角，看起来更舒服、更自然。
超椭圆（Superellipse）也称为拉梅曲线（Lamé curve），是在笛卡儿坐标系下满足以下方程式的点的集合：
$|\frac{x}a|^{n} + |\frac{y}b|^{n} = 1$
未完待续...
开始
说到「超椭圆 Superellipse」可能很多人不了解，但小米于 2021 年 3 月 30 日发布的全新 LOGO 很多人不陌生。没错，它就是超椭圆的一个例子，长这样 👇
当时雷总刚开完发布会，小米旗下的网站还没来得及更换全新的 LOGO，然后开发同学直接拉了个
border-radius为19px的圆角（没记错的话）还被各大网友调侃，哈哈。现在已经换上了一个 SVG 图形。CodePen
在大学时期，那会做小米主题接触到超椭圆，然后就迷上了。在以前，iOS 的应用图标总是要比 Android 好看一些，原因就在它圆角上。当然，现在看国内几家系统都已经用上了，爽！
超椭圆
超椭圆（Superellipse）也称为拉梅曲线（Lamé curve），是在笛卡儿坐标系下满足以下方程式的点的集合：
$|\frac{x}a|^{n} + |\frac{y}b|^{n} = 1$
未完待续...