stack top-level constant
String
const stack
Raw JSON definition of the DiceBear stack avatar style.
Implementation
const String stack = '''{
"\$schema": "https://cdn.hopjs.net/npm/@dicebear/schema@1.4.0/dist/definition.min.json",
"\$comment": "Hand-authored definition (no Figma source).",
"meta": {
"license": {
"name": "CC0 1.0",
"url": "https://creativecommons.org/publicdomain/zero/1.0/",
"text": "„Stack” (https://www.dicebear.com) by „DiceBear”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/)"
},
"creator": {
"name": "DiceBear",
"url": "https://www.dicebear.com"
},
"source": {
"name": "Stack",
"url": "https://www.dicebear.com"
}
},
"canvas": {
"elements": [
{
"name": "piles",
"type": "component"
}
],
"width": 100,
"height": 100
},
"attributes": {
"fill": "none",
"shape-rendering": "auto"
},
"components": {
"piles": {
"width": 100,
"height": 100,
"rotate": {
"min": -4,
"max": 4,
"step": 2
},
"variants": {
"three": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.62 0 0 .69 19 64.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.48 0 0 .62 28 51.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.36 0 0 .58 30 38.75)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.6 0 0 .6 38 17.25)"
}
}
]
},
"threeWide": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.74 0 0 .65 13 67.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.56 0 0 .69 19 51.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.42 0 0 .58 32 39.25)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.65 0 0 .65 37 15.75)"
}
}
]
},
"threeLean": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.64 0 0 .62 14 64.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.5 0 0 .65 28 50.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.38 0 0 .54 28 38.75)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.55 0 0 .55 39 19.25)"
}
}
]
},
"threeBelly": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.52 0 0 .65 24 64.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.66 0 0 .62 19 50.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.4 0 0 .58 28 38.25)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.55 0 0 .55 39 18.75)"
}
}
]
},
"four": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.66 0 0 .62 17 68)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.54 0 0 .58 25 55.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.44 0 0 .54 26 44)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.34 0 0 .5 34 33.5)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.5 0 0 .5 40 16)"
}
}
]
},
"fourLean": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.68 0 0 .58 13 69)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.56 0 0 .62 25 55.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.46 0 0 .5 24 45)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.34 0 0 .54 35 33.5)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.5 0 0 .5 40 16)"
}
}
]
},
"fourBelly": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.58 0 0 .58 21 68)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.44 0 0 .54 25 56.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.62 0 0 .58 21 44)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.36 0 0 .5 31 33.5)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.48 0 0 .48 40.5 17)"
}
}
]
},
"five": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.68 0 0 .54 16 69.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.58 0 0 .5 23 59.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.48 0 0 .5 24 48.75)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.38 0 0 .46 33 39.25)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.3 0 0 .42 34 30.75)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.43 0 0 .43 41.5 16.25)"
}
}
]
},
"pair": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.72 0 0 .85 14 61.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.52 0 0 .77 26 44)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.75 0 0 .75 35 16.5)"
}
}
]
},
"boulder": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.78 0 0 .92 11 61)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.54 0 0 .73 26 44.5)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.8 0 0 .8 34 15)"
}
}
]
},
"tower": {
"elements": [
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.46 0 0 .69 27 71.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.42 0 0 .65 32 57)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneDeep"
},
"transform": "matrix(.38 0 0 .65 28 42.5)"
}
},
{
"name": "stone",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneMid"
},
"transform": "matrix(.32 0 0 .58 36 30)"
}
},
{
"name": "cap",
"type": "component",
"attributes": {
"color": {
"type": "color",
"name": "stoneLight"
},
"transform": "matrix(.55 0 0 .55 39 10.5)"
}
}
]
}
}
},
"stone": {
"width": 100,
"height": 26,
"variants": {
"pill": {
"elements": [
{
"name": "rect",
"type": "element",
"attributes": {
"x": "0",
"y": "0",
"width": "100",
"height": "26",
"fill": "currentColor",
"rx": "13"
}
}
]
},
"dome": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 26V13C0 5.8 5.8 0 13 0h74c7.2 0 13 5.8 13 13v13Z",
"fill": "currentColor"
}
}
]
},
"block": {
"elements": [
{
"name": "rect",
"type": "element",
"attributes": {
"x": "0",
"y": "0",
"width": "100",
"height": "26",
"fill": "currentColor",
"rx": "5"
}
}
]
},
"lens": {
"elements": [
{
"name": "ellipse",
"type": "element",
"attributes": {
"cx": "50",
"cy": "13",
"rx": "50",
"ry": "13",
"fill": "currentColor"
}
}
]
},
"trapezoid": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M7 26q-7 0-3.68-6.16l7.36-13.68Q14 0 21 0h58q7 0 10.32 6.16l7.36 13.68Q100 26 93 26Z",
"fill": "currentColor"
}
}
]
},
"wedge": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M6.99 25.58Q0 26 2.06 19.31L5.94 6.69Q8 0 15 0h70q7 0 9.6 6.5l2.8 7q2.6 6.5-4.39 6.92Z",
"fill": "currentColor"
}
}
]
},
"pebble": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M4 20c-3.33-3.5.33-12.67 6-16S27.67.33 38 0s24.5.67 34 2 18.67 3 23 6 5.5 9 3 12-6.67 5.17-18 6-37.33 0-50-1-22.67-1.5-26-5",
"fill": "currentColor"
}
}
]
}
}
},
"cap": {
"width": 40,
"height": 40,
"variants": {
"ball": {
"elements": [
{
"name": "circle",
"type": "element",
"attributes": {
"cx": "20",
"cy": "20",
"r": "20",
"fill": "currentColor"
}
}
]
},
"egg": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M20 0c9 0 14 11 14 21 0 11-6 19-14 19S6 32 6 21C6 11 11 0 20 0",
"fill": "currentColor"
}
}
]
},
"dome": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 40V20C0 9 9 0 20 0s20 9 20 20v20Z",
"fill": "currentColor"
}
}
]
},
"cube": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M2 11q0-9 9-9h18q9 0 9 9v18q0 9-9 9H11q-9 0-9-9Z",
"fill": "currentColor"
}
}
]
},
"drop": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M20 2c8 8 16 16 16 24s-7 13-16 13S4 34 4 26s8-16 16-24",
"fill": "currentColor"
}
}
]
},
"slab": {
"elements": [
{
"name": "rect",
"type": "element",
"attributes": {
"x": "0",
"y": "10",
"width": "40",
"height": "30",
"fill": "currentColor",
"rx": "10"
}
}
]
}
}
}
},
"colors": {
"background": {
"values": [
"#f7f4ef",
"#f1f1ee",
"#eef1f3",
"#f5f0eb"
]
},
"stoneLight": {
"values": [
"#e8dbd8",
"#e7dccf",
"#e0e2b8",
"#c5e8d4",
"#cce3e7",
"#d9dee7",
"#dfdce7",
"#e8d9e2"
]
},
"stoneMid": {
"values": [
"#c7877c",
"#b29472",
"#9c9e72",
"#78a68d",
"#78a2aa",
"#829bc3",
"#a18fc4",
"#c87db0"
]
},
"stoneDeep": {
"values": [
"#7c483f",
"#675440",
"#595a40",
"#445f50",
"#435d62",
"#3f5882",
"#614a86",
"#764566"
]
}
}
}
''';