[分享创造] 做了个 squircle 生成器,可以复制 CSS clip-path 或下载 SVG(纯前端 / 免费)

发布时间：2026-06-09T22:06:38+08:00 阅读：0 分类：tech

[分享创造] 做了个 squircle 生成器,可以复制 CSS clip-path 或下载 SVG(纯前端
/ 免费) — [分享创造] 做了个 squircle 生成器,可以复制 CSS clip-path 或下载 SVG(纯前端 / 免费)

最近折腾 UI 老要用到 iOS 那种 squircle(超椭圆)圆角——就是比普通 border-radius 更顺滑、苹果 App 图标那种形状。网上现成工具要么只能导固定形状,要么要登录,干脆自己写了一个。

地址:https://squirclegenerator.com (纯前端,不用注册,不上传任何东西)

能做的:

拖滑块调宽、高、圆角平滑度(其实就是超椭圆的指数 n)
实时预览 + 选颜色
一键复制 CSS clip-path,或下载像素级精确的 SVG
带了几个预设:iOS 应用图标、按钮、卡片、头像

实现就是超椭圆公式 |x/a|^n + |y/b|^n = 1 采样生成路径,clip-path 和 SVG 两种输出,整站纯静态零构建。

主要自己用着方便,顺手分享。有不好用或者想加的功能,欢迎拍砖 🙏

来源: v2ex查看原文