Glass

Glass is an abstract vector avatar style featuring translucent, geometric glass-effect shapes. Generate modern, design-forward customizable profile icons for apps with a premium aesthetic.

Glass 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/glass/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 { glass } from '@dicebear/collection';

const avatar = createAvatar(glass, {
  // ... 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 glass

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/glass/svg?seed=Felix

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

dicebear glass --seed "Felix"

flip

Type boolean

false

true

false

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

createAvatar(glass, {
  flip: false
});

dicebear glass --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

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

createAvatar(glass, {
  rotate: 0
});

dicebear glass --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

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

createAvatar(glass, {
  scale: 50
});

dicebear glass --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

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

createAvatar(glass, {
  radius: 0
});

dicebear glass --radius 0

size

Type integerMinimum 1

32

48

64

80

96

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

createAvatar(glass, {
  size: 32
});

dicebear glass --size 32

backgroundColor

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

b6e3f4

c0aede

d1d4f9

ffd5dc

ffdfbf

7e47eb

7eeb47

47b4eb

47d0eb

47eb7e

47eb47

47eb62

47eb99

47ebb4

47ebd0

47ebeb

62eb47

99eb47

477eeb

4747eb

4762eb

4799eb

6247eb

9947eb

b4eb47

b447eb

d0eb47

d047eb

eb7e47

eb47d0

eb47eb

eb477e

eb4747

eb4762

eb4799

eb6247

eb9947

ebb447

ebd047

ebeb47

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

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

dicebear glass --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

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

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

dicebear glass --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/glass/svg?backgroundRotation=0,360

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

dicebear glass --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear glass --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear glass --translateY -50

clip

Type boolean

true

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

createAvatar(glass, {
  clip: true
});

dicebear glass --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/glass/svg?randomizeIds=false

createAvatar(glass, {
  randomizeIds: false
});

dicebear glass --randomizeIds false

shape1

Type array

a

d

e

g

i

n

r

t

a

d

e

g

i

n

r

t

https://api.dicebear.com/9.x/glass/svg?shape1=a,d,e

createAvatar(glass, {
  shape1: ["a","d","e"]
});

dicebear glass --shape1 "a" "d" "e"

shape1OffsetX

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 offset.

-80

80

https://api.dicebear.com/9.x/glass/svg?shape1OffsetX=-80,80

createAvatar(glass, {
  shape1OffsetX: [-80,80]
});

dicebear glass --shape1OffsetX -80 80

shape1OffsetY

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 offset.

-80

80

https://api.dicebear.com/9.x/glass/svg?shape1OffsetY=-80,80

createAvatar(glass, {
  shape1OffsetY: [-80,80]
});

dicebear glass --shape1OffsetY -80 80

shape1Rotation

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/glass/svg?shape1Rotation=-180,180

createAvatar(glass, {
  shape1Rotation: [-180,180]
});

dicebear glass --shape1Rotation -180 180

shape2

Type array

a

d

e

g

i

n

r

t

a

d

e

g

i

n

r

t

https://api.dicebear.com/9.x/glass/svg?shape2=a,d,e

createAvatar(glass, {
  shape2: ["a","d","e"]
});

dicebear glass --shape2 "a" "d" "e"

shape2OffsetX

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 offset.

-80

80

https://api.dicebear.com/9.x/glass/svg?shape2OffsetX=-80,80

createAvatar(glass, {
  shape2OffsetX: [-80,80]
});

dicebear glass --shape2OffsetX -80 80

shape2OffsetY

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 offset.

-80

80

https://api.dicebear.com/9.x/glass/svg?shape2OffsetY=-80,80

createAvatar(glass, {
  shape2OffsetY: [-80,80]
});

dicebear glass --shape2OffsetY -80 80

shape2Rotation

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.

-160

160

https://api.dicebear.com/9.x/glass/svg?shape2Rotation=-160,160

createAvatar(glass, {
  shape2Rotation: [-160,160]
});

dicebear glass --shape2Rotation -160 160

Details

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

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

CDN sponsored by

Glass ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

shape1

shape1OffsetX

shape1OffsetY

shape1Rotation

shape2

shape2OffsetX

shape2OffsetY

shape2Rotation

Details ​

Glass

Usage

Options

Details