{"id":13511875,"url":"https://github.com/multiavatar/Multiavatar","last_synced_at":"2025-03-30T21:31:09.471Z","repository":{"id":37745737,"uuid":"313732427","full_name":"multiavatar/Multiavatar","owner":"multiavatar","description":"Multicultural Avatar Generator in JavaScript","archived":false,"fork":false,"pushed_at":"2022-03-26T08:27:50.000Z","size":1529,"stargazers_count":1726,"open_issues_count":8,"forks_count":163,"subscribers_count":15,"default_branch":"main","last_synced_at":"2024-05-18T14:04:49.410Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://multiavatar.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multiavatar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-17T20:16:16.000Z","updated_at":"2024-05-16T03:20:36.000Z","dependencies_parsed_at":"2022-07-12T16:44:41.641Z","dependency_job_id":null,"html_url":"https://github.com/multiavatar/Multiavatar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiavatar%2FMultiavatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiavatar%2FMultiavatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiavatar%2FMultiavatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiavatar%2FMultiavatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multiavatar","download_url":"https://codeload.github.com/multiavatar/Multiavatar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246385096,"owners_count":20768661,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T03:01:15.224Z","updated_at":"2025-03-30T21:31:09.460Z","avatar_url":"https://github.com/multiavatar.png","language":"JavaScript","readme":"# Multiavatar #\n\n\u003cimg src=\"https://raw.githubusercontent.com/multiavatar/Multiavatar/main/logo.png?v=001\" width=\"65\"\u003e\n\n[Multiavatar](https://multiavatar.com) is a multicultural avatar maker.\n\nMultiavatar represents people from multiple races, multiple cultures, multiple age groups, multiple worldviews and walks of life.\n\nIn total, it is possible to generate **12,230,590,464** unique avatars.\n\n\n\n### Installation and usage ###\n\nInclude the script and pass any string to the 'multiavatar' function. It will return the SVG code for the avatar.\n\n\nUsing npm: \n\n`npm i @multiavatar/multiavatar`\n\nCommonJS:\n```\nconst multiavatar = require('@multiavatar/multiavatar')\nlet svgCode = multiavatar('Binx Bond')\n```\n\nES Module:\n```\nimport multiavatar from '@multiavatar/multiavatar/esm'\nlet svgCode = multiavatar('Binx Bond')\n```\n\n\nUsing the script tag:\n\n```\n\u003cscript src=\"multiavatar.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  var avatarId = 'Binx Bond';\n  var svgCode = multiavatar(avatarId);\n\u003c/script\u003e\n```\n\n\nInclude from CDN:\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@multiavatar/multiavatar/multiavatar.min.js\"\u003e\u003c/script\u003e\n```\n\n\n\n### Info ###\n\nThe initial unique 48 (16x3) avatar characters are designed to work as the source from which all 12 billion avatars are generated.\n\nYou can find them in the `svg` folder. These initial characters can be edited with a vector drawing program, such as Inkscape. They are in grayscale, since the color is applied later by the script, and grayscale is better for shapes design.\n\nEvery avatar consists of 6 parts:\n- Environment\n- Clothes\n- Head\n- Mouth\n- Eyes\n- Top\n\nAlso, there are different versions of different parts. In some final avatars, additional parts are hidden with transparency (`none` for the color) to create different shapes by re-using the same code. Also, each avatar has 3 unique color themes that are defined in the script. In total, there are: `16 characters x 3 versions/themes = 48 initial unique avatars`. You can see them all by opening the `svg/index.html` file in your browser.\n\nTo create new avatars, the Multiavatar script mixes different parts of different avatars, and different color themes.\n\nThe total number of unique avatars: 48^6 = 12,230,590,464\n\nOne of the main Multiavatar functions is to work as an identicon. Every unique avatar can be identified by the unique string of characters, associated with the avatar.\n\nThe string of characters is also the input for the Multiavatar script, which converts the provided string into a 6 double-digit numbers (range 00-47), each representing an individual part of the final avatar.\n\n`000000000000` - this string of numbers represents the very first avatar + its A theme. You can also read it like this: `00 00 00 00 00 00`.\n\n`474747474747` - this is the 12,230,590,464th avatar (or the 16th initial avatar + its \"C\" color theme).\n\nMore info can be found in the `multiavatar.js` file comments.\n\n\n\n### Development ###\n\nMultiavatar is coded in vanilla JavaScript. Only a single library (SHA-256) is used, integrated into the script. The initial character designs in SVG are also integrated into the script. So there is a single dependency-free JavaScript file that has everything in it (minified 68 KB).\n\nTo test different parts manually, you can uncomment them in the code.\n\nAlso, the Multiavatar script accepts the following three paramenters: `string`, `sansEnv`, `ver`.\n\n`string` - The text string that will be converted into the avatar. This parameter is required, the other two are optional.\n\n`sansEnv` - If this is `true`, the script returns the final avatar without the circle background (environment part).\n\n`ver` - Pass an object to force a specific initial version, for example: `multiavatar('test', false, {'part': '01', 'theme': 'A'});`\n\nWhile the algorithm generates 12 billion unique avatars, some parts (eyes, mouth) are still similar, so it means that currently there are less than 12 billion unique avatars. It is trivial to make all avatars unique by slightly changing the color, but visually that would not make a difference. That's why instead of forcing a formal solution, some parts are left unfinished intentionally.\n\nThe design of shapes, and the multicultural balance of avatars are also open for further polishing, optimization, creative ideas and improvements.\n\n\n\n### Design ###\n\nThe final SVG files are saved (Inkscape 1.0 as \"Optimized SVG\") with the `_final` suffix in the `svg` folder.\n\nAfter editing the SVG files with a vector program, overwrite the existing `_final.svg` files with your new versions. Then run the `_build.php` script to automatically update the `multiavatar-dev.js` script with the new SVG code from your `_final.svg` files.\n\n\n\n### API ###\n\nTo get an avatar as SVG code, add the avatar's ID to the URL:\n\n```\nhttps://api.multiavatar.com/Binx Bond\n```\nJavaScript API call example to get SVG code:\n\n```\nlet avatarId = 'Binx Bond'\nfetch('https://api.multiavatar.com/'\n+JSON.stringify(avatarId))\n  .then(res =\u003e res.text())\n  .then(svg =\u003e console.log(svg))\n```\nTo get an avatar as SVG file, add .svg to the end of the URL:\n\n```\nhttps://api.multiavatar.com/Binx Bond.svg\n```\nTo get an avatar as PNG file, add .png to the end of the URL:\n\n```\nhttps://api.multiavatar.com/Binx Bond.png\n```\n\n\n\n### License ###\n\nYou can use Multiavatar for free, as long as the conditions described in the [LICENSE](LICENSE) are followed.\n\n\n\n### Screenshots ###\n\n\u003cimg src=\"https://multiavatar.com/press/img/screenshots/screenshot-02.png?v=001\"\u003e\n\n\u003cimg src=\"https://multiavatar.com/press/img/screenshots/screenshot-03.png?v=001\"\u003e\n\n\u003cimg src=\"https://multiavatar.com/press/img/screenshots/screenshot-09.png?v=001\"\u003e\n\n\u003cimg src=\"https://multiavatar.com/press/img/screenshots/screenshot-10.png?v=001\"\u003e\n\n\n\n### More info ###\n\nFor additional information and extended functionality, visit the [multiavatar.com](https://multiavatar.com) web-app.\n\nThe app is based on static html for the home page, and on Laravel 8 + Vue.js for extended functionality, including the web store.\n\nThe product mockup generator for the [Merch Maker](https://multiavatar.com/merch-maker) is based on the ImageMagick library.\n","funding_links":[],"categories":["JavaScript","前端/博客"],"sub_categories":["前端库"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiavatar%2FMultiavatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultiavatar%2FMultiavatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiavatar%2FMultiavatar/lists"}