开源一个数据可视化风格的头像库 vistars，适合可视化产品

小为2026-05-31 15:45

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

开源地址： https://github.com/hustcc/vistars

预览官网： https://vistars.ling.pub/

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

vistars

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

Install

bash 复制代码

npm install vistars

Usage

bash 复制代码

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

bash 复制代码

<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