blobs top-level constant
String
const blobs
Raw JSON definition of the DiceBear blobs avatar style.
Implementation
const String blobs = '''{
"\$schema": "https://cdn.hopjs.net/npm/@dicebear/schema@1.3.0/dist/definition.min.json",
"\$comment": "Hand-authored definition (no Figma source). Safe to edit directly.",
"meta": {
"license": {
"name": "CC0 1.0",
"url": "https://creativecommons.org/publicdomain/zero/1.0/",
"text": "„Blobs” (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": "Blobs",
"url": "https://www.dicebear.com"
}
},
"canvas": {
"elements": [
{
"name": "body",
"type": "component"
},
{
"name": "animation",
"type": "component"
}
],
"width": 100,
"height": 100
},
"attributes": {
"fill": "none",
"shape-rendering": "auto"
},
"components": {
"body": {
"width": 100,
"height": 100,
"translate": {
"x": {
"min": -14,
"max": 14
},
"y": {
"min": -14,
"max": 14
}
},
"variants": {
"duo": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".3",
"transform": "matrix(1.5 0 0 1.5 -25 -25)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l1"
},
"children": [
{
"name": "blob01",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".55",
"transform": "matrix(.62 0 0 .62 19 19)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l2"
},
"children": [
{
"name": "blob02",
"type": "component"
}
]
}
]
}
]
},
"trio": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".22",
"transform": "matrix(1.7 0 0 1.7 -35 -35)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l1"
},
"children": [
{
"name": "blob01",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".38",
"transform": "matrix(.95 0 0 .95 2.5 2.5)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l2"
},
"children": [
{
"name": "blob02",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".6",
"transform": "matrix(.42 0 0 .42 29 29)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l3"
},
"children": [
{
"name": "blob03",
"type": "component"
}
]
}
]
}
],
"weight": 2
},
"quartet": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".16",
"transform": "matrix(1.8 0 0 1.8 -40 -40)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l1"
},
"children": [
{
"name": "blob01",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".28",
"transform": "translate(-7.5 -7.5)scale(1.15)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l2"
},
"children": [
{
"name": "blob02",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".42",
"transform": "matrix(.6 0 0 .6 20 20)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l3"
},
"children": [
{
"name": "blob03",
"type": "component"
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".6",
"transform": "matrix(.3 0 0 .3 35 35)"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-l4"
},
"children": [
{
"name": "blob04",
"type": "component"
}
]
}
]
}
]
}
}
},
"blob": {
"width": 100,
"height": 100,
"rotate": {
"min": -180,
"max": 180
},
"scale": {
"min": 0.85,
"max": 1.15
},
"translate": {
"x": {
"min": -7,
"max": 7
},
"y": {
"min": -7,
"max": 7
}
},
"variants": {
"drift": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M95.08 50.28c-.99 9.4-12.54 23.49-25.56 26.74-13.02 3.26-42.24-4.35-52.55-7.2-10.31-2.84-11.79-2.39-9.31-9.87 2.48-7.49 12.9-28.48 24.2-35.04 11.31-6.56 33.11-8.53 43.64-4.3 10.54 4.22 20.58 20.27 19.58 29.67",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
},
"dune": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M75.03 41.71c-.97 8.49-6.34 30.79-12.35 36.7-6.01 5.9-14.23 3.53-23.69-1.27-9.46-4.81-33.78-18.99-33.06-27.56.73-8.57 26.98-20.17 37.41-23.86s19.89-.93 25.17 1.73c5.29 2.67 7.49 5.77 6.52 14.26",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
},
"pool": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M87.35 50.62c2.18 11.17-2.73 17.12-9 24.33-6.26 7.22-19.1 17.67-28.58 18.96-9.49 1.28-24.15-.27-28.33-11.23-4.19-10.96-.67-41.13 3.22-54.54 3.9-13.42 13.35-22.58 20.12-25.95C51.56-1.17 58.2-.14 65.29 7.93c7.1 8.07 19.89 31.52 22.06 42.69",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
},
"melt": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M77.05 45.57c.65 7.31 11.37 25.75 5.12 31.32-6.26 5.57-33.09 3.58-42.66 2.13-9.58-1.46-10.85-2.61-14.8-10.87s-14.05-30.39-8.9-38.7c5.15-8.3 29.37-11.74 39.78-11.15 10.42.59 19.11 10.16 22.68 14.7 3.58 4.55-1.87 5.25-1.22 12.57",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
},
"drop": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M77.67 56.19C75.28 66.25 73.5 82.5 66.56 85.58c-6.93 3.08-21.42-6.63-30.51-10.91-9.08-4.28-22.71-6.29-23.99-14.78-1.28-8.5 4.85-30.42 16.33-36.2 11.47-5.77 44.29-3.88 52.51 1.53 8.21 5.42-.84 20.91-3.23 30.97",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
},
"pond": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M84.12 56.18c.11 7.82-3.88 19.27-8.57 22.12-4.68 2.85-8.45-3.23-19.56-5.01-11.1-1.78-40.23-.84-47.06-5.69-6.84-4.85 3.35-16.54 6.05-23.4s5.83-13.21 10.15-17.75c4.33-4.54 7.5-10.31 15.8-9.49 8.29.82 26.77 7.87 33.97 14.41 7.2 6.53 9.11 16.99 9.22 24.81",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
}
}
},
"blob01": {
"extends": "blob"
},
"blob02": {
"extends": "blob"
},
"blob03": {
"extends": "blob"
},
"blob04": {
"extends": "blob"
},
"animation": {
"width": 100,
"height": 100,
"variants": {
"none": {
"elements": []
},
"fastest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-fastest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbba-fastest){--dbba-t:0.75;--dbba-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbbaSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(9deg) translate(3px,-2px) scale(1.05)}66%{transform:rotate(-5deg) translate(-2px,2px) scale(0.97)}} @keyframes dbbaSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-9deg) translate(-3px,2px) scale(0.96)}66%{transform:rotate(5deg) translate(2px,-2px) scale(1.04)}} @keyframes dbbaWanderA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(13deg) translate(5px,-4px) scale(1.08)}65%{transform:rotate(-8deg) translate(-4px,3px) scale(0.94)}} @keyframes dbbaWanderB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(-13deg) translate(-5px,4px) scale(0.93)}65%{transform:rotate(8deg) translate(4px,-3px) scale(1.07)}} .dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{transform-box:fill-box;transform-origin:center} .dbba-l1{animation:dbbaSwayA calc(var(--dbba-t,1)*18s) ease-in-out infinite} .dbba-l2{animation:dbbaSwayB calc(var(--dbba-t,1)*14s) ease-in-out infinite} .dbba-l3{animation:dbbaWanderA calc(var(--dbba-t,1)*11s) ease-in-out infinite} .dbba-l4{animation:dbbaWanderB calc(var(--dbba-t,1)*9s) ease-in-out infinite}.dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{animation-play-state:var(--dbba-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"fast": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-fast"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbba-fast){--dbba-t:0.9;--dbba-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbbaSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(9deg) translate(3px,-2px) scale(1.05)}66%{transform:rotate(-5deg) translate(-2px,2px) scale(0.97)}} @keyframes dbbaSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-9deg) translate(-3px,2px) scale(0.96)}66%{transform:rotate(5deg) translate(2px,-2px) scale(1.04)}} @keyframes dbbaWanderA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(13deg) translate(5px,-4px) scale(1.08)}65%{transform:rotate(-8deg) translate(-4px,3px) scale(0.94)}} @keyframes dbbaWanderB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(-13deg) translate(-5px,4px) scale(0.93)}65%{transform:rotate(8deg) translate(4px,-3px) scale(1.07)}} .dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{transform-box:fill-box;transform-origin:center} .dbba-l1{animation:dbbaSwayA calc(var(--dbba-t,1)*18s) ease-in-out infinite} .dbba-l2{animation:dbbaSwayB calc(var(--dbba-t,1)*14s) ease-in-out infinite} .dbba-l3{animation:dbbaWanderA calc(var(--dbba-t,1)*11s) ease-in-out infinite} .dbba-l4{animation:dbbaWanderB calc(var(--dbba-t,1)*9s) ease-in-out infinite}.dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{animation-play-state:var(--dbba-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"medium": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-medium"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbba-medium){--dbba-t:1;--dbba-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbbaSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(9deg) translate(3px,-2px) scale(1.05)}66%{transform:rotate(-5deg) translate(-2px,2px) scale(0.97)}} @keyframes dbbaSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-9deg) translate(-3px,2px) scale(0.96)}66%{transform:rotate(5deg) translate(2px,-2px) scale(1.04)}} @keyframes dbbaWanderA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(13deg) translate(5px,-4px) scale(1.08)}65%{transform:rotate(-8deg) translate(-4px,3px) scale(0.94)}} @keyframes dbbaWanderB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(-13deg) translate(-5px,4px) scale(0.93)}65%{transform:rotate(8deg) translate(4px,-3px) scale(1.07)}} .dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{transform-box:fill-box;transform-origin:center} .dbba-l1{animation:dbbaSwayA calc(var(--dbba-t,1)*18s) ease-in-out infinite} .dbba-l2{animation:dbbaSwayB calc(var(--dbba-t,1)*14s) ease-in-out infinite} .dbba-l3{animation:dbbaWanderA calc(var(--dbba-t,1)*11s) ease-in-out infinite} .dbba-l4{animation:dbbaWanderB calc(var(--dbba-t,1)*9s) ease-in-out infinite}.dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{animation-play-state:var(--dbba-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slow": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-slow"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbba-slow){--dbba-t:1.15;--dbba-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbbaSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(9deg) translate(3px,-2px) scale(1.05)}66%{transform:rotate(-5deg) translate(-2px,2px) scale(0.97)}} @keyframes dbbaSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-9deg) translate(-3px,2px) scale(0.96)}66%{transform:rotate(5deg) translate(2px,-2px) scale(1.04)}} @keyframes dbbaWanderA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(13deg) translate(5px,-4px) scale(1.08)}65%{transform:rotate(-8deg) translate(-4px,3px) scale(0.94)}} @keyframes dbbaWanderB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(-13deg) translate(-5px,4px) scale(0.93)}65%{transform:rotate(8deg) translate(4px,-3px) scale(1.07)}} .dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{transform-box:fill-box;transform-origin:center} .dbba-l1{animation:dbbaSwayA calc(var(--dbba-t,1)*18s) ease-in-out infinite} .dbba-l2{animation:dbbaSwayB calc(var(--dbba-t,1)*14s) ease-in-out infinite} .dbba-l3{animation:dbbaWanderA calc(var(--dbba-t,1)*11s) ease-in-out infinite} .dbba-l4{animation:dbbaWanderB calc(var(--dbba-t,1)*9s) ease-in-out infinite}.dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{animation-play-state:var(--dbba-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slowest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbba-slowest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbba-slowest){--dbba-t:1.35;--dbba-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbbaSwayA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(9deg) translate(3px,-2px) scale(1.05)}66%{transform:rotate(-5deg) translate(-2px,2px) scale(0.97)}} @keyframes dbbaSwayB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}33%{transform:rotate(-9deg) translate(-3px,2px) scale(0.96)}66%{transform:rotate(5deg) translate(2px,-2px) scale(1.04)}} @keyframes dbbaWanderA{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(13deg) translate(5px,-4px) scale(1.08)}65%{transform:rotate(-8deg) translate(-4px,3px) scale(0.94)}} @keyframes dbbaWanderB{0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}30%{transform:rotate(-13deg) translate(-5px,4px) scale(0.93)}65%{transform:rotate(8deg) translate(4px,-3px) scale(1.07)}} .dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{transform-box:fill-box;transform-origin:center} .dbba-l1{animation:dbbaSwayA calc(var(--dbba-t,1)*18s) ease-in-out infinite} .dbba-l2{animation:dbbaSwayB calc(var(--dbba-t,1)*14s) ease-in-out infinite} .dbba-l3{animation:dbbaWanderA calc(var(--dbba-t,1)*11s) ease-in-out infinite} .dbba-l4{animation:dbbaWanderB calc(var(--dbba-t,1)*9s) ease-in-out infinite}.dbba-l1,.dbba-l2,.dbba-l3,.dbba-l4{animation-play-state:var(--dbba-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
}
}
}
},
"colors": {
"background": {
"values": [
"#0369a1",
"#1d4ed8",
"#4338ca",
"#6d28d9",
"#a21caf",
"#be185d",
"#be123c",
"#c2410c",
"#b45309",
"#047857",
"#0f766e",
"#1e293b"
]
},
"blob": {
"contrastTo": "background",
"values": [
"#ffffff",
"#000000"
]
}
}
}
''';