爱意满满的作品展示区。
50vip

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

  •  1
     
  •   50vip · 1 day ago · 671 views

    因为做一个数据可视化产品 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.

    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

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2596 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 15:33 · PVG 23:33 · LAX 08:33 · JFK 11:33
    ♥ Do have faith in what you're doing.