前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载bloub 是一个纯 SVG 实现的 x.ai 机器人头像重制项目一个填充形状在 14 种状态之间平滑变形两个白色眼睛独立运动不依赖任何动画库。更棒的是它内置了完整的个性化面板——8 种身体形状、12 种颜色、16 种常驻表情任意组合都能实时预览并自动记住你的选择。本指南带你从零开始打造一个专属的 AI 机器人头像还能一键导出成 PNG、SVG 或 GIF。打开个性化面板3步开始定制左侧边栏有 3 个视图点击「个性化」即可进入定制面板界面分为三个区块形状Shape4 列网格每个格子就是一颗实时预览的小机器人表情Expression同样是预览格子点一下眼睛立刻换表情颜色Color6 列色板选中项会有一圈墨黑色描边所有选择都是所见即所得——缩略图和中间的大头像用同一套渲染参数预览什么样导出就是什么样。面板逻辑见 Customizer.vue。8种身体形状从圆形到水滴形状定义了机器人的「体型」完整清单定义在 skins.ts 中形状特点圆形经典默认款正圆卵石用低阶谐波轻微扭曲的不规则圆自然随性圆角方形超椭圆边角圆润的方形胶囊横向躺倒的胶囊形三角形顶点朝上的圆角三角六边形上下平边的圆角六边形云朵多个圆并集出的蓬松轮廓水滴底部圆、顶部尖的水滴形一个贴心细节所有形状都做了归一化处理让最大半径对齐保证换形状时视觉大小一致——圆角方形在斜向上会「显胖」所以它单独放大了 1.15 倍来平衡视觉重量源码注释里有这个实测数据。12种颜色一眼挑出你的风格色板同样在 skins.ts 中定义覆盖暖、冷、中性三大色系深色系墨黑默认、棕色、灰色高饱和红色、橙色、琥珀、绿色、青绿、蓝色、紫色、粉色浅色系奶油白浅色背景下自动带一圈内描边不会「消失」搭配建议奶油白 三角形 得意表情就是一枚干净的极简风头像墨黑 云朵 困倦表情则更有「刚睡醒的机器人」反差萌。16种表情只靠两只眼睛的情绪这是 bloub 最有意思的部分。机器人没有眉毛和嘴巴全部情绪只靠眼睛的 4 个杠杆表达头部朝向yaw/pitch/roll、两眼间距、眼睛宽高比、以及每只眼睛的镜像倾斜角——正是最后这个参数让「生气」上挑内收和「难过」下垂外撇成为可能。16 种表情一览定义在 expressions.ts平静、专注、惊讶、兴奋、开心、大笑、生气、难过、害怕、怀疑、困惑、好奇、得意、羞怯、无趣、困倦比如「怀疑」是一眼半眯一眼睁大「困惑」连两只眼睛的大小都不对称——这些细节都写在源码里值得翻一翻。组合思路让头像「活」起来上面这张图是 bloub 的 14 种动画状态定格静止、思考、眨眼、警示、蛋形、轨道、爆散、彗星等。你的自定义外观会和这些动画协同工作静止idle状态下身体会呈现你选的 8 种形状之一眼睛呈现你选的 16 种表情切到眨眼、警示等表情状态时眼睛会换成从参考视频逐帧测量出的姿态蛋形、六边形、三角形等状态自带专属轮廓动画结束后再 morph 回你的自定义形状所以一个实用的配方是选一个有辨识度的形状 一个有性格的表情 一个低饱和颜色再配合「动画」视图把「眨眼 思考 轨道」排进时间线就得到一个独一无二的循环头像。你的设置不会丢自动记忆每次点击形状、颜色、表情都会写入浏览器 localStorage统一前缀bloub:见 stockage.ts下次打开页面自动恢复。语言偏好、已保存的动画序列同样会被记住零配置成本。一键导出PNG / SVG / GIF 全都有定制完成后个性化视图底部的导出栏支持下载 PNG1024×1024 单图覆盖所有平台的头像规格Discord 128、GitHub 500、Slack 512下载 SVG无限缩放眼睛还会带平滑的漂移动画下载 GIF 动图适合只认 GIF 的平台可选白色或透明背景复制图片 / 复制 SVG直接粘贴到 Figma 等设计工具整个导出流程零依赖静图只用浏览器原生能力细节可看 docs/export.md。进阶把自定义头像编进动画序列「动画」视图是一个小型时间线编辑器把 14 种状态排进序列、调整每段的保持时长、保存为命名序列还能整体导出为 MP4 或 GIF 循环视频。配合你刚定制的 8×12×16 外观专属 AI 机器人头像就此完成 ✅小工具在地址栏加#planche可以冻结查看全部 14 种状态并排对比方便挑选你想放进循环的状态组合。小结bloub 把「定制」做到了极简8 种形状 × 12 种颜色 × 16 种表情点选即用、自动记忆、一键导出。无论你是想给聊天室换个有灵魂的头像还是想研究「测量驱动的 SVG 动画」是怎么做的参考 docs/measurements.md这个项目都值得打开玩玩。赞分享前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载相关推荐Papirus文件夹颜色自定义终极教程12种配色方案一键切换指南Papirus文件夹颜色自定义终极教程12种配色方案一键切换指南 Papirus是一款专为Linux系统设计的像素级完美图标主题以其丰富的色彩和扁平化设计风UI组件告别单调绘图tldraw 12种内置形状全解析与自定义指南告别单调绘图tldraw 12种内置形状全解析与自定义指南 你还在为绘图工具中固定死板的形状而烦恼团队协作时总找不到合适的图表元素本文将带你彻底掌握tld前端UI组件三步打造专属AI形象ChatBox聊天模型头像自定义全攻略三步打造专属AI形象ChatBox聊天模型头像自定义全攻略 你是否厌倦了千篇一律的AI默认头像想让你的聊天界面更具个性与辨识度ChatBox最新版本推出的AI 应用桌面应用大模型创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考