Appearance

Return to top

Rings ​

Rings by DiceBear, licensed under CC0 1.0 .

LICENSE

While our code is MIT licensed, the design of this avatar style is licensed under CC0 1.0. See details for more information.

Open in Playground

Usage ​

Options ​

seed

Type string

The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based.

flip

Type boolean

rotate

Type integer
Minimum 0
Maximum 360

scale

Type integer
Minimum 0
Maximum 200

radius

Type integer
Minimum 0
Maximum 50

size

Type integer
Minimum 1

backgroundColor

Type array
Item Pattern ^(transparent|[a-fA-F0-9]{6})$

backgroundType

Type array

backgroundRotation

Type array

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree. The rotation is only visible if backgroundType is set to ['gradientLinear'].

translateX

Type integer
Minimum -100
Maximum 100

translateY

Type integer
Minimum -100
Maximum 100

clip

Type boolean

randomizeIds

Type boolean

This option randomize the IDs in the generated SVG / XML. This can be useful for example if the avatars are included directly in the HTML and you want to avoid ID collisions.

ring

Type array

ringColor

Type array
Item Pattern ^(transparent|[a-fA-F0-9]{6})$

ringFive

Type array

ringFiveRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

ringFour

Type array

ringFourRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

ringOne

Type array

ringOneRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

ringRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

ringThree

Type array

ringThreeRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

ringTwo

Type array

ringTwoRotation

Type array
Max Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree.

Details ​

Naming
Collection Import
import { rings } from '@dicebear/collection';
Package Import
import * as style from '@dicebear/rings';
CLI
dicebear rings
HTTP-APIhttps://api.dicebear.com/9.x/rings/svg
JSON Schemahttps://api.dicebear.com/9.x/rings/schema.json
Source
TitleRings
CreatorDiceBear
Websitehttps://www.dicebear.com
LicenseCC0 1.0
Sourcehttps://www.dicebear.com
Adventurer by Lisa Wischofsky / CC BY 4.0. Avataaars by Pablo Stanley / Free for personal and commercial use. Face Generator by The Visual Team / CC BY 4.0. Custom Avatar by Ashley Seo / CC BY 4.0. Bottts by Pablo Stanley / Free for personal and commercial use. Croodles - Doodle your face by vijay verma / CC BY 4.0. Dylan! The Avatar Generator by Natalia Spivak / CC BY 4.0. Fun Emoji Set by Davis Uche / CC BY 4.0. Bootstrap Icons by The Bootstrap Authors / MIT. Lorelei by Lisa Wischofsky / CC0 1.0. Avatar Illustration System by Micah Lanier / CC BY 4.0. Miniavs - Free Avatar Creator by Webpixels / CC BY 4.0. Notionists by Zoish / CC0 1.0. Open Peeps by Pablo Stanley / CC0 1.0. Personas by Draftbit by Draftbit - draftbit.com / CC BY 4.0. - All avatars are remixes of the original works.