https://github.com/darosh/gridy-avatars

SVG avatars generator
https://github.com/darosh/gridy-avatars

avatar generator random svg vector

Last synced: 2 months ago
JSON representation

SVG avatars generator

• Host: GitHub
• URL: https://github.com/darosh/gridy-avatars
• Owner: darosh
• License: mit
• Created: 2018-04-05T23:28:58.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-08T06:07:37.000Z (almost 7 years ago)
• Last Synced: 2024-11-14T10:11:30.124Z (2 months ago)
• Topics: avatar, generator, random, svg, vector
• Language: JavaScript
• Homepage: https://darosh.github.io/gridy-avatars/dist/
• Size: 148 KB
• Stars: 68
• Watchers: 1
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gridy Avatars [![npm (scoped)](https://img.shields.io/npm/v/gridy-avatars.svg)](https://www.npmjs.com/package/gridy-avatars) [![demo](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://darosh.github.io/gridy-avatars/dist/) [![Try gridy-avatars on RunKit](https://badge.runkitcdn.com/gridy-avatars.svg)](https://npm.runkit.com/gridy-avatars)

> SVG avatars generator

![sample 1](https://darosh.github.io/gridy-avatars/dist/sample-1.svg)![sample 2](https://darosh.github.io/gridy-avatars/dist/sample-2.svg)![sample 3](https://darosh.github.io/gridy-avatars/dist/sample-3.svg)![sample 4](https://darosh.github.io/gridy-avatars/dist/sample-4.svg)![sample 5](https://darosh.github.io/gridy-avatars/dist/sample-5.svg)

## Demo

Try randomize button [here](https://darosh.github.io/gridy-avatars/dist/).

## Usage

* see exported API in [./src/avatars.js](./src/avatars.js)

* use [./dist/avatars.js](./dist/avatars.js)

* see [./dist/index.html](./dist/index.html) for example usage (with Vue.js)

## Development

1. `yarn`

2. edit [./src/avatars.svg](./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](./shapes.json)

5. `npm run build`

## Notes

* 86 = 262.144 variants

* based on 24×24 pixels grid

* using Material Design colors (generated in [./src/colors.js](./src/colors.js))

* no transparent colors

* utilizing SVG clipPaths (with fully opaque colors)

* no dependencies

* inspired by [Gabfranck/svg_avatar](https://github.com/Gabfranck/svg_avatar)