Hi there !
First of all this is really awesome :) thank you for making this awesome ability!
I've managed to run locally and get images generated :D
Now starting to study up on svgs and how to make them, would like to draw my own art style and have it generate a new set of results

Was wondering if you could suggest how you made your images, which program you used, and if there's any specific formatting needed to have it work with the app , like having exactly 6 sections, etc

Thanks a lot ! Have a good one !

Hi @giekaton your project is excellent, but in some websites and Apps, the avatar is a square shape, so It would be better if the Multiavatar can support generating square shape avatar.

It seems changing the avatar's shape and spread the background color to the edge can do it, but this change may
cost a lot, even rebuild the project.

So an easier way is adding an option discard background , without the circle background, the avatar can fit not only circle shape but the square shape.

Thank you very much!

从图像到文本的转换，我想可以用来做一些东西。

e.g.

Long hair person with a mustache is kind of weird. Maybe it's better to have a consistent sexual identityfication?

in typescript can't find

I have just finished rewriting Multiavatar in PHP.

It is now being used for the https://api.multiavatar.com, which became much faster, because before it was a mix of PHP and Node.js, and now just PHP.

Further on, I'm planning to build avatar images "on the fly". On user request, the image will be generated and saved on the server. It will be possible to generate and access it directly just by adding .png or .svg at the end of the URL, e.g. https://multiavatar.com/Starcrasher.png

Additionally, this PHP script will be used in the Multiavatar WordPress plugin, which is planned for the near future.

For more details, please refer to the PHP repository here: https://github.com/multiavatar/multiavatar-php

I wonder how these files run on the server because it's slow to visit your site to get pictures

Is there any way users on my website could choose from selected options without leaving the site.
It would be great if options are only 16 or 48 instead of 12 billion.
Need an api which I call to get full list, get avatar characters or generate random avatar.

Thanks for your fantastic work! I just created an account on your website. I am just wondering how can I use the API Access Keys shown in my account page.

It used to be possible, but now it is not working, the link is reset, and the browser webpage cannot be accessed, and a VPN is required

Are you thinking about publishing the API on NPM in a format like CommonJS, UMD, or ES?

Hi,
Any plans to provide types and to rewrite the library in typescript?

More and more people are using ES modules because of their static nature. It would be great if Multiavatar supported that. Support for UMD would also be great so then users of AMD and people who just read off the global object could also use it. There a couple different ways this could be implemented, the most organized being a rollup build setup or something, the least being copy and pasting the same code into different files for different formats.

Congrats on the new repo! I love it!

It would be handy to be able to add a gender filter, or a filter that creates gender-neutral avatars (say, no mustache for female and gender-neutral avatars).

Hello @giekaton !

Abstract

I am building a web with users and didn't want to use the "default_user.svg" since it is boring. Found this package and fell in love with it immediately.

Problem

So I went ahead integrated it with my React project and since I don't want to "unsafely render svg text" on my web, I tried inline SVG like the following:

// React Component
const Avatar = () => {
  const svgString = useMemo(() => {
    return multiavatar("hello world!", false)
  }, [])

  return (
    <img src={`data:image/svg+xml,${svgString}`} alt="avatar" />
  )
}

The above did not render because # is included in the svgString.

Solution

So I tried encoding the string as such:

// from "https://github.com/tigt/mini-svg-data-uri"
// "modified" a bit
const REGEX = {
    whitespace: /\s+/g,
    urlHexPairs: /%[\dA-F]{2}/g,
    quotes: /"/g,
}

function specialHexEncode(match: string) {
    switch (match) {
        case '%20': return ' ';
        case '%3D': return '=';
        case '%3A': return ':';
        case '%2F': return '/';
        default: return match.toLowerCase();
    }
}

export const toDataURI = (string: string) =>
    encodeURIComponent(string)
        .trim()
        .replace(REGEX.whitespace, ' ')
        .replace(REGEX.quotes, "'")
        .replace(REGEX.urlHexPairs, specialHexEncode)

The above code was used as return toDataURI(multiavatar("hello world!", false)) and what do you know, it renders!

Advantages

For developers using multiavatar on the client side can easily render the avatars with img tag.

Request

multiavatar function to include optional parameter asDataURI?: boolean (defaults to false)

Real Life Usage

// React Component
const Avatar = () => {
  const svgString = useMemo(() => {
    // May also support options object?
    // return multiavatar("hello world", {
    //   asDataURI: true,
    //   sansEnv: false,
    // })
    
    // expecting `data:image/svg+xml,{encodedSVGstring}`
    return multiavatar("hello world", false, , true);
  }, [])

  return (
    <img src={svgString} alt="avatar" />
  )
}

Edit:

• Mentioned @giekaton because I wanted to say hello ✋
• Added expectation returned from multiavatar @ Real Life Usage

Hello, Thank you for providing such an excellent project。 How long will this API be used？

It's an excellent library for generating a unique avatar and it's serving a great purpose.
I think it will gain perfection with an age and gender filter. Since we already have an issue with the gender filter. This issue is a similar request to add an age filter.