【免费下载链接】blobatar项目地址https://gitcode.com/gh_mirrors/bl/blobatar点击查看免费下载blobatar是一个零依赖的轻量库能把任意字符串用户名、邮箱、ID确定性地渲染成一张几何风格的 SVG 头像。它的 blobatar() 函数 通过几个核心参数——background、hue、tone、traits、expression、animate——让你精细控制生成的头像外观。本文用一张图加逐项拆解帮你快速看懂每个参数的作用、取值范围和常见用法。快速开始一行代码生成头像在写参数之前先确认你已经能跑起来import { blobatar } from blobatar; const svg blobatar(alainexample.com); // svg xmlns... viewBox0 0 100 100…默认情况下同一个字符串永远生成同一张脸——形状、颜色、色调都由名字哈希决定。所有选项的作用就是在这个随机但稳定的基础上做覆盖。完整参数一览表所有选项都通过blobatar(name, options)的第二个参数传入定义在 BlobatarOptions参数默认值作用size无输出width/height属性省略则由 CSS 决定background无透明背景板形状squircle/circle/square/falsehue按名字哈希锁定色相0–360 度名字只影响形状tone按名字哈希锁定色调位置0–1从浅色到墨色traits无逐个锁定某个特征形状、眼睛比例等palette无按色槽直接覆盖 hex 颜色跳过对比度保证normalizetrue对名字做 NFC 去空格 小写化contrasttrue是否强制执行最小对比度约束title无输出title元素辅助屏幕阅读器animate无hover或always开启动效expressionidle表情姿态如happy、sad、thinkingbackground给头像加一块背景板默认 blobatar 是透明背景身体本身就是头像。想加背景板时把background设成三种形状之一squircle— 圆角方形最接近 iOS 应用图标的观感circle— 正圆square— 直角方形false— 显式关闭等价于不传背景板的填充色来自调色板的bg槽位backdrop() 会按你选的形状生成对应的path。blobatar(tove, { background: squircle });⚠️ 背景板默认关闭是因为在深色页面上浅色调的头像本身就够醒目强行加底色反而会让浅色调失去存在感。hue锁定颜色名字只管形状不传hue时色相0–360°由名字哈希决定。传入hue后所有名字共享同一色相名字只决定形状blobatar(tove, { hue: 12 }); // 粉红 blobatar(clara, { hue: 40 }); // 橙 blobatar(emil, { hue: 140 }); // 绿这是品牌色场景的核心想让团队里所有人都是同一色系但每人的脸型还是自己那一份。hue与traits.hue重叠时hue度数优先traits.hue0–1 位置被覆盖。tone控制从浅到深的墨色档位blobatar 的调色板不是连续的而是6 档手工设计的色调pastel → pale → mid → deep → bright → ink定义在 color.ts 的 TONES。tone用 0–1 的数值在这 6 档中选取0→ 最浅的 pastel0.999→ 最深的 ink1会被回绕到0所以想拿墨色请用0.999blobatar(yasmín, { hue: 190, tone: 0.999 }); // 深蓝墨色色调集是同一主色、不同浓度的设计纪律避免生成出来的调色板看起来像随机数。 眼睛的明暗会随tone自动翻转身体够深时眼睛自动变浅保证 4.5:1 的对比度不丢失。traits细粒度锁定形状与眼睛traits是比hue/tone更底层的配置面——它直接覆盖任意一条特征轴的 0–1 取值键名与 styles/compose.ts 和 styles/shapes.ts 中的布局读取一一对应。单个值 固定// 永远是 sun 形状 永远宽眼其余按名字 blobatar(user.email, { traits: { shape: 0.95, eye.ratio: 0 } });数组 收窄范围名字仍在其中选// 只能是 round / cloud / sun具体哪一个仍由名字决定 blobatar(user.email, { traits: { shape: [0.11, 0.825, 0.965] } });留空 交给名字没写的键仍然从哈希里来所以traits天然是部分覆盖。 数值范围num的 min/max、pick数组内容都在major 版本内冻结所以traits的配置语义在 minor 升级中不会漂移。详见 traits.ts。palette 与 contrast颜色兜底开关palette允许按色槽直接写 hex跳过所有对比度检查——适合你已经有品牌色、不想让库改色的场景blobatar(gita, { palette: { head: #3B82F6, eye: #FFFFFF } });contrast: false则整体关掉 FLOORS 里的最小对比度约束眼睛对头部 ≥ 4.5:1、头部对背景 ≥ 1.25:1。除非你在做特殊视觉实验否则保持默认true。expression14 种预置表情姿态expression接收从 blobatar/expression导入的值不是字符串所以只打包你真正用到的姿态。完整清单idle/happy/sad/mad/surprised/wink/sleepy/smug/unsure/scared/love/shy/sick/thinkingimport { happy } from blobatar/expression; blobatar(name, { expression: happy }); // 静态姿态无动效几个关键规则是状态不是事件——设了就一直保持直到你改它idle与不传该参数字节级相同不会让任何现有头像变化不带animate时也能用会烘焙进几何体适合img场景只有thinking是一直在动的姿态两眼左右换位的 900ms 跷跷板mad、love、shy、sick是上色姿态带 tint每个额外引入约 60–720 B 的 OKLab 色彩路径happy这类冷姿态只要 35 B 左右。animatehover 还是 always取值适用场景hover头像网格——只有鼠标悬停时才动避免 400 张脸同时呼吸always个人主页、单个大头像开启animate会让 blobatar 从img切换为内联 SVG约 12 个 DOM 节点并需要额外引入blobatar/motion.css。字符串 APIblobatar()本身不认animate只有框架适配器blobatar/react、blobatar/vue等支持。参数速查卡什么场景用什么需求推荐参数组合团队品牌色{ hue: 220 }深色 UI 墨色头像{ hue: 220, tone: 0.999, background: squircle }永远同一形状但每人脸不同{ traits: { shape: 0.95 } }限定 2–3 种形状做风格约束{ traits: { shape: [0.11, 0.825, 0.965] } }加载指示器{ expression: thinking, animate: hover }头像墙400 张不传animate保持img模式个人主页单张{ animate: always, background: circle }相关源码与文档选项类型定义packages/blobatar/src/render.ts调色板与 tone 档位packages/blobatar/src/color.tstraits 覆盖语义packages/blobatar/src/traits.ts形状词汇与权重带packages/blobatar/src/styles/blob.ts表情完整规格packages/blobatar/docs/expression-spec.md运动idle/blink规格packages/blobatar/docs/motion-spec.md官方 README含所有选项表格packages/blobatar/README.md 参数细节以源码注释与 README 表格为准本文用于快速建立全局印象遇到边界情况请回看 render.ts 的 JSDoc。赞分享【免费下载链接】blobatar项目地址https://gitcode.com/gh_mirrors/bl/blobatar点击查看免费下载相关推荐openpilot 新手实操指南一次搞懂给爱车装开源辅助驾驶openpilot 新手实操指南一次搞懂给爱车装开源辅助驾驶 早高峰在车流里蠕了两小时右脚在油门和刹车之间来回切换下班时整条腿都是酸的。如果你的原车只带最自动驾驶人工智能计算机视觉深度学习机器人interact.js事件系统完整参考从dragstart到doubletap一文看懂interact.js事件系统完整参考从dragstart到doubletap一文看懂 interact.js 是专为现代浏览器打造的 JavaScript前端通达信财务数据处理实战从批量获取到深度分析的完整解决方案通达信财务数据处理实战从批量获取到深度分析的完整解决方案 在量化投资和金融数据分析领域获取准确、全面的财务数据是进行基本面分析的基础。通达信作为国内主流的证金融科技数据分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考