Avatar Genrator

Introduction

A web platform to create random avatar,

View Demo View Github

Preview:

Run

base on vue@2.x, make sure that node has been installed on your device

  1. clone repository
git clone https://github.com/wave-charts/avatar-gen.git
cd chart-gen
Bash
  1. run project

Run with Yarn

yarn
yarn serve
Bash

Run with npm

npm install
npm run serve
Bash

Custom

These resource in project can be found at Figma community: https://www.figma.com/community/file/829741575478342595/Avatar-Illustration-System

export const avatarConfig: Record<LayerType, LayerConfig[]> = {
  // 头
  Base: [
    {
      id: 1,  // 素材文件夹下的文件名， eg: `src/views/resource/Base/1.vue`
      colorLib: colorLib.skin,  // 可用颜色的集合
      weight: 5,  // 权重，影响出现的概率
    },
  ],

  // 耳朵
  Ear: [
    {
      id: 1,  // eg: `src/views/resource/Ear/1.vue`
      colorRefer: "Base", // 设置颜色跟随， eg: Ear 的颜色跟随 Base (即耳朵的颜色和头保持一致)
      weight: 1,
    },
    {
      id: 2,  // eg: `src/views/resource/Ear/2.vue`
      colorRefer: "Base",
      weight: 1,
    },
  ],

  ...
};
Ts