shapes top-level constant
String
const shapes
Raw JSON definition of the DiceBear shapes avatar style.
Implementation
const String shapes = '''{
"\$schema": "https://cdn.hopjs.net/npm/@dicebear/schema@1.3.0/dist/definition.min.json",
"\$comment": "This file was generated by the DiceBear Exporter for Figma. https://www.figma.com/community/plugin/1005765655729342787 Manually extended with an opt-in animation component (`animationVariant`); re-exporting from Figma would drop it.",
"meta": {
"license": {
"name": "CC0 1.0",
"url": "https://creativecommons.org/publicdomain/zero/1.0/",
"text": "„Shapes” (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": "Shapes",
"url": "https://www.dicebear.com"
}
},
"canvas": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-s1"
},
"children": [
{
"name": "shape01",
"type": "component",
"attributes": {
"transform": "matrix(1.2 0 0 1.2 -10 -190)"
}
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-s2"
},
"children": [
{
"name": "shape02",
"type": "component",
"attributes": {
"transform": "matrix(.8 0 0 .8 10 -110)"
}
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-s3"
},
"children": [
{
"name": "shape03",
"type": "component",
"attributes": {
"transform": "matrix(.4 0 0 .4 30 -30)"
}
}
]
},
{
"name": "animation",
"type": "component"
}
],
"width": 100,
"height": 100
},
"attributes": {
"fill": "none",
"shape-rendering": "auto"
},
"components": {
"shape01": {
"width": 100,
"height": 400,
"rotate": {
"min": -160,
"max": 160
},
"scale": {
"min": 0.9,
"max": 1.1
},
"translate": {
"x": {
"min": -80,
"max": 80
},
"y": {
"min": -20,
"max": 20
}
},
"variants": {
"ellipse": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 240a40 40 0 1 0 0-80 40 40 0 0 0 0 80m0 10a50 50 0 1 0 0-100 50 50 0 0 0 0 100",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
],
"weight": 0
},
"ellipseFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M100 200a50 50 0 1 1-100 0 50 50 0 0 1 100 0",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
]
},
"line": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill": {
"type": "color",
"name": "shape1"
},
"d": "M45 0h10v400H45z"
}
}
]
},
"polygon": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 157 0 243.6h100zm0 20-32.7 56.6h65.4z",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
],
"weight": 0
},
"polygonFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "m50 157 50 86.6H0z",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
]
},
"rectangle": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M90 160H10v80h80zM0 150v100h100V150z",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
],
"weight": 0
},
"rectangleFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 150h100v100H0z",
"fill": {
"type": "color",
"name": "shape1"
}
}
}
]
}
}
},
"shape02": {
"width": 100,
"height": 400,
"rotate": {
"min": -160,
"max": 160
},
"scale": {
"min": 0.9,
"max": 1.1
},
"translate": {
"x": {
"min": -60,
"max": 60
},
"y": {
"min": -15,
"max": 15
}
},
"variants": {
"ellipse": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 240a40 40 0 1 0 0-80 40 40 0 0 0 0 80m0 10a50 50 0 1 0 0-100 50 50 0 0 0 0 100",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
],
"weight": 0
},
"ellipseFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M100 200a50 50 0 1 1-100 0 50 50 0 0 1 100 0",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
]
},
"line": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill": {
"type": "color",
"name": "shape2"
},
"d": "M45 0h10v400H45z"
}
}
]
},
"polygon": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 157 0 243.6h100zm0 20-32.7 56.6h65.4z",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
],
"weight": 0
},
"polygonFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "m50 157 50 86.6H0z",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
]
},
"rectangle": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M90 160H10v80h80zM0 150v100h100V150z",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
],
"weight": 0
},
"rectangleFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 150h100v100H0z",
"fill": {
"type": "color",
"name": "shape2"
}
}
}
]
}
}
},
"shape03": {
"width": 100,
"height": 400,
"rotate": {
"min": -160,
"max": 160
},
"scale": {
"min": 0.9,
"max": 1.1
},
"translate": {
"x": {
"min": -40,
"max": 40
},
"y": {
"min": -10,
"max": 10
}
},
"variants": {
"ellipse": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 240a40 40 0 1 0 0-80 40 40 0 0 0 0 80m0 10a50 50 0 1 0 0-100 50 50 0 0 0 0 100",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
},
"ellipseFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M100 200a50 50 0 1 1-100 0 50 50 0 0 1 100 0",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
},
"line": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill": {
"type": "color",
"name": "shape3"
},
"d": "M45 0h10v400H45z"
}
}
]
},
"polygon": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M50 157 0 243.6h100zm0 20-32.7 56.6h65.4z",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
},
"polygonFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "m50 157 50 86.6H0z",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
},
"rectangle": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M90 160H10v80h80zM0 150v100h100V150z",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
},
"rectangleFilled": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 150h100v100H0z",
"fill": {
"type": "color",
"name": "shape3"
}
}
}
]
}
}
},
"animation": {
"width": 100,
"height": 100,
"variants": {
"none": {
"elements": []
},
"fastest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-fastest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbsh-fastest){--dbsh-t:0.75;--dbsh-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbshSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(3.5deg) translate(1.5px,-1px) scale(1.02)}66%{transform:rotate(-2deg) translate(-1px,1px) scale(0.99)}} @keyframes dbshSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-3.5deg) translate(-1.5px,1px) scale(0.98)}66%{transform:rotate(2deg) translate(1px,-1px) scale(1.01)}} .dbsh-s1,.dbsh-s2,.dbsh-s3{transform-box:fill-box;transform-origin:center} .dbsh-s1{animation:dbshSwayA calc(var(--dbsh-t,1)*23s) ease-in-out infinite} .dbsh-s2{animation:dbshSwayB calc(var(--dbsh-t,1)*18s) ease-in-out infinite} .dbsh-s3{animation:dbshSwayA calc(var(--dbsh-t,1)*14s) ease-in-out infinite}.dbsh-s1,.dbsh-s2,.dbsh-s3{animation-play-state:var(--dbsh-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"fast": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-fast"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbsh-fast){--dbsh-t:0.9;--dbsh-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbshSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(3.5deg) translate(1.5px,-1px) scale(1.02)}66%{transform:rotate(-2deg) translate(-1px,1px) scale(0.99)}} @keyframes dbshSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-3.5deg) translate(-1.5px,1px) scale(0.98)}66%{transform:rotate(2deg) translate(1px,-1px) scale(1.01)}} .dbsh-s1,.dbsh-s2,.dbsh-s3{transform-box:fill-box;transform-origin:center} .dbsh-s1{animation:dbshSwayA calc(var(--dbsh-t,1)*23s) ease-in-out infinite} .dbsh-s2{animation:dbshSwayB calc(var(--dbsh-t,1)*18s) ease-in-out infinite} .dbsh-s3{animation:dbshSwayA calc(var(--dbsh-t,1)*14s) ease-in-out infinite}.dbsh-s1,.dbsh-s2,.dbsh-s3{animation-play-state:var(--dbsh-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"medium": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-medium"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbsh-medium){--dbsh-t:1;--dbsh-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbshSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(3.5deg) translate(1.5px,-1px) scale(1.02)}66%{transform:rotate(-2deg) translate(-1px,1px) scale(0.99)}} @keyframes dbshSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-3.5deg) translate(-1.5px,1px) scale(0.98)}66%{transform:rotate(2deg) translate(1px,-1px) scale(1.01)}} .dbsh-s1,.dbsh-s2,.dbsh-s3{transform-box:fill-box;transform-origin:center} .dbsh-s1{animation:dbshSwayA calc(var(--dbsh-t,1)*23s) ease-in-out infinite} .dbsh-s2{animation:dbshSwayB calc(var(--dbsh-t,1)*18s) ease-in-out infinite} .dbsh-s3{animation:dbshSwayA calc(var(--dbsh-t,1)*14s) ease-in-out infinite}.dbsh-s1,.dbsh-s2,.dbsh-s3{animation-play-state:var(--dbsh-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slow": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-slow"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbsh-slow){--dbsh-t:1.15;--dbsh-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbshSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(3.5deg) translate(1.5px,-1px) scale(1.02)}66%{transform:rotate(-2deg) translate(-1px,1px) scale(0.99)}} @keyframes dbshSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-3.5deg) translate(-1.5px,1px) scale(0.98)}66%{transform:rotate(2deg) translate(1px,-1px) scale(1.01)}} .dbsh-s1,.dbsh-s2,.dbsh-s3{transform-box:fill-box;transform-origin:center} .dbsh-s1{animation:dbshSwayA calc(var(--dbsh-t,1)*23s) ease-in-out infinite} .dbsh-s2{animation:dbshSwayB calc(var(--dbsh-t,1)*18s) ease-in-out infinite} .dbsh-s3{animation:dbshSwayA calc(var(--dbsh-t,1)*14s) ease-in-out infinite}.dbsh-s1,.dbsh-s2,.dbsh-s3{animation-play-state:var(--dbsh-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slowest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbsh-slowest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbsh-slowest){--dbsh-t:1.35;--dbsh-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbshSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(3.5deg) translate(1.5px,-1px) scale(1.02)}66%{transform:rotate(-2deg) translate(-1px,1px) scale(0.99)}} @keyframes dbshSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-3.5deg) translate(-1.5px,1px) scale(0.98)}66%{transform:rotate(2deg) translate(1px,-1px) scale(1.01)}} .dbsh-s1,.dbsh-s2,.dbsh-s3{transform-box:fill-box;transform-origin:center} .dbsh-s1{animation:dbshSwayA calc(var(--dbsh-t,1)*23s) ease-in-out infinite} .dbsh-s2{animation:dbshSwayB calc(var(--dbsh-t,1)*18s) ease-in-out infinite} .dbsh-s3{animation:dbshSwayA calc(var(--dbsh-t,1)*14s) ease-in-out infinite}.dbsh-s1,.dbsh-s2,.dbsh-s3{animation-play-state:var(--dbsh-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
}
}
}
},
"colors": {
"background": {
"values": [
"#0a5b83",
"#1c799f",
"#69d2e7",
"#f1f4dc",
"#f88c49"
]
},
"shape1": {
"notEqualTo": [
"background"
],
"values": [
"#0a5b83",
"#1c799f",
"#69d2e7",
"#f1f4dc",
"#f88c49"
]
},
"shape2": {
"notEqualTo": [
"background",
"shape1"
],
"values": [
"#0a5b83",
"#1c799f",
"#69d2e7",
"#f1f4dc",
"#f88c49"
]
},
"shape3": {
"notEqualTo": [
"background",
"shape1",
"shape2"
],
"values": [
"#0a5b83",
"#1c799f",
"#69d2e7",
"#f1f4dc",
"#f88c49"
]
}
}
}
''';