Dicebear Avatars
DevelopmentAn Introduction to the DiceBear API
If you're looking for a way to generate unique and customizable avatar images, you might want to check out the DiceBear API!
The DiceBear API is a free and open source solution that lets you generate unique avatar images using a simple HTTP request. The images are vector-based, meaning they can be scaled and customized without losing quality.
How to Use the DiceBear API
To use the DiceBear API, you'll need to make an HTTP request to the following URL: https://avatars.dicebear.com/api/:sprites/:seed.svg
:sprites
: The type of avatar you want to generate. There are currently six different sprites available:male
,female
,identicon
,avataaars
,jdenticon
, andgridy
.:seed
: The seed value used to generate the avatar. This can be any string value, such as a username or email address.
For example, to generate a male avatar for the seed value "john@example.com", you would use the following URL: https://avatars.dicebear.com/api/male/john@example.com.svg
To customize the avatar, you can add additional URL parameters to the end of the URL:
options[background][]
: The background color(s) of the avatar. Multiple values can be specified by repeating this parameter with different values. For example,options[background][]=ff0000&options[background][]=00ff00
would create a striped background with red and green.options[width]
: The width of the avatar image in pixels.options[height]
: The height of the avatar image in pixels.options[radius]
: The border radius of the avatar image in pixels.options[grayscale]
: Whether or not to use a grayscale color scheme for the avatar. Set totrue
orfalse
.
Here's an example of how you can generate a customized avatar using JavaScript:
const seed = "jane@example.com";
const options = {
width: 200,
height: 200,
background: ["#000000", "#ffffff"],
radius: 100,
grayscale: true,
};
const url = `https://avatars.dicebear.com/api/avataaars/${seed}.svg?${new URLSearchParams(options)}`;
const img = document.createElement("img");
img.src = url;
document.body.appendChild(img);
This would create a 200x200 avataaars avatar for the seed "jane@example.com", with a black and white striped background, rounded corners, and a grayscale color scheme.
Conclusion
The DiceBear API is a powerful and easy-to-use solution for generating unique and customizable avatar images. By using different sprites and URL parameters, you can create a wide variety of avatars to suit your needs. So go ahead and give it a try!