Gridy Avatars

SVG avatars generator

Demo

Try online version here.

Usage

• see exported API in ./src/avatars.js
• use ./dist/avatars.js
• see ./dist/index.html for example usage (with Vue.js)

Development

1. yarn
2. edit ./src/avatars.svg in Inkscape (use one layer per feature)
3. npm run dev
4. copy generated shapes from dev web app to ./shapes.json
5. npm run build

Notes

• 8⁶ = 262.144 variants
• based on 24×24 pixels grid
• using Material Design colors (generated in ./src/colors.js)
• no transparent colors
• utilizing SVG clipPaths (with fully opaque colors)
• no dependencies
• inspired by Gabfranck/svg_avatar