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

5 月 29 日
 50vip

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

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


vistars

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

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

1592 次点击
所在节点    分享创造
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1216372

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX