[分享创造] 开源一个数据可视化风格的头像库 vistars，适合可视化产品

发布时间：2026-05-29T10:19:55+08:00 阅读：0 分类：tech

[分享创造] 开源一个数据可视化风格的头像库 vistars，适合可视化产品

因为做一个数据可视化产品 Sive，所以做了一个适配风格的头像库，开源出来，MIT 协议，欢迎需要的使用，喜欢的给个 star ⭐️⭐️⭐️。

开源地址： https://github.com/hustcc/vistars
预览官网： https://vistars.ling.pub/

生成的是很轻量的 svg ，前端、服务端都能运行，很容易做成服务接口 /avatar/<username>。以下是 readme：

vistars

👾🎨 SVG-based data visualization style avatars from any username and color palette. Works in both browsers and Node.js.

vistars preview

Install

npm install vistars

Usage

import vistars from 'vistars';

const svg = vistars({ name: 'Alice Johnson', variant: 'bar' });

// Use in browser
document.getElementById('avatar').innerHTML = svg;

// Use in Node.js server-side rendering
fs.writeFileSync('avatar.svg', svg);

CDN / Script Tag Usage

<script src="https://unpkg.com/vistars/dist/index.umd.js"></script>
<script>
  const svg = Vistars.vistars({ name: 'Alice Johnson', variant: 'donut' });
  document.getElementById('avatar').innerHTML = svg;
</script>

Props

Prop Type Default name string Clara Barton variant bar | donut | radar | line | heatmap | treemap | boxplot | pie | area | column | scatter | funnel | liquid | venn bar colors string[] ['#3b82f6', '#06b6d4', '#8b5cf6', '#f59e0b', '#ec4899'] size number | string 40 square boolean false light boolean false

License

MIT

来源: v2ex查看原文