@plushfamily/token-art

Requirements

• Node 16.2+ (ES6 modules support)

Run

npm run dev

Build

npm run build

Usage

Look at demo.ts file as an example.

Common example

Renderer creation

const gradients: Array<StageGradient> = [
  new StageGradient([0, '#43cea2'], [20, '#185a9d']), // Gradient from 0 years to 20 years
  new StageGradient([20, '#185a9d'], [40, '#02aab0']),
  new StageGradient([40, '#02aab0'], [60, '#243b55']),
  new StageGradient([60, '#243b55'], [80, '#ff5e62']),
  new StageGradient([80, '#ff5e62'], [100, '#ffedbc'])
];

const options = {
  svg: {
    width: 600, // width of svg image
    height: 600 // height of svg image
  },
  gap: 150, // multiplier of distance between layers
  radius: 200, // radius (px) of the smallest layer (actually will be a bit less because of deformation)
  maxNameLength: 16, // maximal name length before truncation with elipsis
  pointsCount: 8, // number of points of each layer (more points => more smooth layers, but bigger image size)
  deformation: 0.36, // deformation multiplier (multiplies activity parameter for each layer)
  opacity: [0.9, 0.9] as [number, number], (opacity from first to last layer)
  colorMap: gradients // gradients for each layer interval
}

const renderer = new Renderer(options);

Renderer Usage

const data: TokenData = {
  birthDate: new Date(new Date().getFullYear() - 5, 0), // birthdate in Date format
  name: 'Jennifer', // name
  gender: 'FEMALE', // gender
  activities: [{ year: 1, x: -0.14982141, y: 0.10229843 }, { year: 2, x: -0.14982141, y: 0.10229843 }] // Array of activities, activities distort initial layer
}

const svg = renderer.render(data); // Returns svg string