Rings

Rings is a geometric abstract vector avatar style featuring interlocking ring patterns. Generate unique, algorithmic customizable profile icons with a clean, modern design suitable for any application.

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

Use this URL to request this avatar style via our HTTP API.

https://api.dicebear.com/9.x/rings/svg

You can use the URL directly as image source.

See HTTP-API docs for more information.

First install the required packages via npm:

npm install @dicebear/core @dicebear/collection --save

Then you can create this avatar as follows:

import { createAvatar } from '@dicebear/core';
import { rings } from '@dicebear/collection';

const avatar = createAvatar(rings, {
  // ... options
});

const svg = avatar.toString();

See JS-Library docs for more information.

First install the CLI package via npm:

npm install --global dicebear

Then you can create this avatar as follows:

dicebear rings

See CLI docs for more information.

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.

Felix

Aneka

https://api.dicebear.com/9.x/rings/svg?seed=Felix

createAvatar(rings, {
  seed: "Felix"
});

dicebear rings --seed "Felix"

flip

Type boolean

false

true

false

https://api.dicebear.com/9.x/rings/svg?flip=false

createAvatar(rings, {
  flip: false
});

dicebear rings --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

https://api.dicebear.com/9.x/rings/svg?rotate=0

createAvatar(rings, {
  rotate: 0
});

dicebear rings --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

https://api.dicebear.com/9.x/rings/svg?scale=50

createAvatar(rings, {
  scale: 50
});

dicebear rings --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

https://api.dicebear.com/9.x/rings/svg?radius=0

createAvatar(rings, {
  radius: 0
});

dicebear rings --radius 0

size

Type integerMinimum 1

32

48

64

80

96

https://api.dicebear.com/9.x/rings/svg?size=32

createAvatar(rings, {
  size: 32
});

dicebear rings --size 32

backgroundColor

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

b6e3f4

c0aede

d1d4f9

ffd5dc

ffdfbf

https://api.dicebear.com/9.x/rings/svg?backgroundColor=b6e3f4,c0aede,d1d4f9

createAvatar(rings, {
  backgroundColor: ["b6e3f4","c0aede","d1d4f9"]
});

dicebear rings --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

https://api.dicebear.com/9.x/rings/svg?backgroundType=gradientLinear,solid

createAvatar(rings, {
  backgroundType: ["gradientLinear","solid"]
});

dicebear rings --backgroundType "gradientLinear" "solid"

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'].

0

360

https://api.dicebear.com/9.x/rings/svg?backgroundRotation=0,360

createAvatar(rings, {
  backgroundRotation: [0,360]
});

dicebear rings --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

https://api.dicebear.com/9.x/rings/svg?translateX=-50

createAvatar(rings, {
  translateX: -50
});

dicebear rings --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

https://api.dicebear.com/9.x/rings/svg?translateY=-50

createAvatar(rings, {
  translateY: -50
});

dicebear rings --translateY -50

clip

Type boolean

true

https://api.dicebear.com/9.x/rings/svg?clip=true

createAvatar(rings, {
  clip: true
});

dicebear rings --clip true

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.

false

https://api.dicebear.com/9.x/rings/svg?randomizeIds=false

createAvatar(rings, {
  randomizeIds: false
});

dicebear rings --randomizeIds false

ring

Type array

container

https://api.dicebear.com/9.x/rings/svg?ring=container

createAvatar(rings, {
  ring: ["container"]
});

dicebear rings --ring "container"

ringColor

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

4db6ac

4dd0e1

4fc3f7

64b5f6

81c784

7986cb

9575cd

aed581

ba68c8

dce775

e57373

f06292

ff8a65

ffb74d

ffd54f

fff176

https://api.dicebear.com/9.x/rings/svg?ringColor=4db6ac,4dd0e1,4fc3f7

createAvatar(rings, {
  ringColor: ["4db6ac","4dd0e1","4fc3f7"]
});

dicebear rings --ringColor "4db6ac" "4dd0e1" "4fc3f7"

ringFive

Type array

eighth

full

half

quarter

full

https://api.dicebear.com/9.x/rings/svg?ringFive=eighth,full,half

createAvatar(rings, {
  ringFive: ["eighth","full","half"]
});

dicebear rings --ringFive "eighth" "full" "half"

ringFiveRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringFiveRotation=-180,180

createAvatar(rings, {
  ringFiveRotation: [-180,180]
});

dicebear rings --ringFiveRotation -180 180

ringFour

Type array

eighth

full

half

quarter

half

quarter

https://api.dicebear.com/9.x/rings/svg?ringFour=eighth,full,half

createAvatar(rings, {
  ringFour: ["eighth","full","half"]
});

dicebear rings --ringFour "eighth" "full" "half"

ringFourRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringFourRotation=-180,180

createAvatar(rings, {
  ringFourRotation: [-180,180]
});

dicebear rings --ringFourRotation -180 180

ringOne

Type array

eighth

full

half

quarter

half

quarter

https://api.dicebear.com/9.x/rings/svg?ringOne=eighth,full,half

createAvatar(rings, {
  ringOne: ["eighth","full","half"]
});

dicebear rings --ringOne "eighth" "full" "half"

ringOneRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringOneRotation=-180,180

createAvatar(rings, {
  ringOneRotation: [-180,180]
});

dicebear rings --ringOneRotation -180 180

ringRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringRotation=-180,180

createAvatar(rings, {
  ringRotation: [-180,180]
});

dicebear rings --ringRotation -180 180

ringThree

Type array

eighth

full

half

quarter

half

quarter

https://api.dicebear.com/9.x/rings/svg?ringThree=eighth,full,half

createAvatar(rings, {
  ringThree: ["eighth","full","half"]
});

dicebear rings --ringThree "eighth" "full" "half"

ringThreeRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringThreeRotation=-180,180

createAvatar(rings, {
  ringThreeRotation: [-180,180]
});

dicebear rings --ringThreeRotation -180 180

ringTwo

Type array

eighth

full

half

quarter

half

quarter

https://api.dicebear.com/9.x/rings/svg?ringTwo=eighth,full,half

createAvatar(rings, {
  ringTwo: ["eighth","full","half"]
});

dicebear rings --ringTwo "eighth" "full" "half"

ringTwoRotation

Type arrayMax 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.

-180

180

https://api.dicebear.com/9.x/rings/svg?ringTwoRotation=-180,180

createAvatar(rings, {
  ringTwoRotation: [-180,180]
});

dicebear rings --ringTwoRotation -180 180

Details

Naming
Collection Import	import { rings } from '@dicebear/collection';
Package Import	import * as style from '@dicebear/rings';
CLI	dicebear rings
HTTP-API	https://api.dicebear.com/9.x/rings/svg
JSON Schema	https://api.dicebear.com/9.x/rings/schema.json

Source
Title	Rings
Creator	DiceBear
Website	https://www.dicebear.com
License	CC0 1.0
Source	https://www.dicebear.com

CDN sponsored by

Rings ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

ring

ringColor

ringFive

ringFiveRotation

ringFour

ringFourRotation

ringOne

ringOneRotation

ringRotation

ringThree

ringThreeRotation

ringTwo

ringTwoRotation

Details ​

Rings

Usage

Options

Details