Create an avatar maker
To be able to create your own avatar to host on Libravatar it would be nice with an own avatar maker directly on the website.
The avatar maker could have a web UI that lets you create your own avatar. The avatar could also be stored in a format that can be fed to the avatar maker. It could output SVG and export to PNG.
Things could be rendered in layers:
- Layer 1: The background
- Layer 2: Skin tone
- Layer 3: Eyes, nose, mouth
- Layer 4: Hair
- Layer 5: Glasses, hat, shirt
Avatar description language
An avatar description language based on JSON or XML could be defined. It could be documented, a specification could be written, maybe even standardized. The data could be fed to the Libravatar avatar maker as well as other third-party avatar makers, games and animation software which could render it in 3D or animated.
Example format
{
"skinTone": 1,
"eyebrowColor": "brown-200",
"eyebrowShape": 7,
"eyeColor": "green-500",
"eyeShape": 5,
"eyeSize": "m",
"lipColor": "red-300",
"lipSize": "m",
"noseShape": 3,
"noseSize": "m",
"shirtColor": "grey-700",
"background": "wall-2",
"mood": "happy"
}
JavaScript
You could pass the format to a JavaScript library that renders it to either a SVG element or to a <canvas>
element.
const element = document.getElementById('output');
let libravatar = new Libravatar();
libravatar.load(example_data);
libravatar.render(element);
JavaScript API
-
load(obj)
- Load avatar object. -
export_png()
- Returns aBlob
object containing the avatar in PNG format. -
export_svg()
- Returns aBlob
object containing the avatar in SVG format. -
setEyebrowColor(value)
- Sets the eyebrow color. -
setEyeColor(value)
- Sets the eye color.
React
There could be a React component.
<Avatar
skinTone="1"
eyebrowColor="brown-200"
eyebrowShape="7"
eyeColor="green-500"
eyeShape="5"
eyeSize="m"
lipColor="red-300"
lipSize="m"
noseShape="3"
noseSize="m"
shirtColor="grey-700"
/>
Get avatar using URL
You could base64 encode the JSON object and pass it as a query parameter.
GET /avatar?data=ewogICAgInNraW5Ub25lIjogMSwKICAgICJleWVicm93Q29sb3IiOiAiY... HTTP/1.1