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@2.0.1/dist/definition.min.json",
"\$comment": "Exported by DiceBear Studio for Figma. https://www.figma.com/community/plugin/1005765655729342787",
"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"
}
],
"width": 100,
"height": 100
},
"attributes": {
"fill": "none",
"shape-rendering": "auto"
},
"components": {
"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.74s-42.24-4.35-52.55-7.2c-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.3s20.58 20.27 19.58 29.67",
"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.58s-21.42-6.63-30.51-10.91-22.71-6.29-23.99-14.78c-1.28-8.5 4.85-30.42 16.33-36.2 11.47-5.77 44.29-3.88 52.51 1.53s-.84 20.91-3.23 30.97",
"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.27S5.21 58.15 5.93 49.58c.73-8.57 26.98-20.17 37.41-23.86s19.89-.93 25.17 1.73 7.49 5.77 6.52 14.26",
"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.15S74.7 28.46 78.27 33c3.58 4.55-1.87 5.25-1.22 12.57",
"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.01s-40.23-.84-47.06-5.69 3.35-16.54 6.05-23.4 5.83-13.21 10.15-17.75 7.5-10.31 15.8-9.49c8.29.82 26.77 7.87 33.97 14.41s9.11 16.99 9.22 24.81",
"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.93s19.89 31.52 22.06 42.69",
"fill": {
"type": "color",
"name": "blob"
}
}
}
]
}
}
},
"blob01": {
"extends": "blob"
},
"blob02": {
"extends": "blob"
},
"blob03": {
"extends": "blob"
},
"blob04": {
"extends": "blob"
},
"body": {
"width": 100,
"height": 100,
"translate": {
"x": {
"min": -14,
"max": 14
},
"y": {
"min": -14,
"max": 14
}
},
"variants": {
"duo": {
"elements": [
{
"name": "blob01",
"type": "component",
"attributes": {
"transform": "matrix(1.5 0 0 1.5 -25 -25)",
"opacity": ".3"
},
"animations": [
{
"name": "sway",
"duration": 18,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 3.2759,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -1.5061,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 9,
"easing": "easeInOut"
},
{
"at": 66,
"value": -5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob02",
"type": "component",
"attributes": {
"transform": "matrix(.62 0 0 .62 19 19)",
"opacity": ".55"
},
"animations": [
{
"name": "sway",
"duration": 14,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -2.6502,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 2.4447,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -9,
"easing": "easeInOut"
},
{
"at": 66,
"value": 5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
}
]
},
"quartet": {
"elements": [
{
"name": "blob01",
"type": "component",
"attributes": {
"transform": "matrix(1.8 0 0 1.8 -40 -40)",
"opacity": ".16"
},
"animations": [
{
"name": "sway",
"duration": 18,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 3.2759,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -1.5061,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 9,
"easing": "easeInOut"
},
{
"at": 66,
"value": -5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob02",
"type": "component",
"attributes": {
"transform": "translate(-7.5 -7.5)scale(1.15)",
"opacity": ".28"
},
"animations": [
{
"name": "sway",
"duration": 14,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -2.6502,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 2.4447,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -9,
"easing": "easeInOut"
},
{
"at": 66,
"value": 5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob03",
"type": "component",
"attributes": {
"transform": "matrix(.6 0 0 .6 20 20)",
"opacity": ".42"
},
"animations": [
{
"name": "wander",
"duration": 11,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": 5.7717,
"easing": "easeInOut"
},
{
"at": 65,
"value": -3.5436,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": -2.7727,
"easing": "easeInOut"
},
{
"at": 65,
"value": 3.5275,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": 13,
"easing": "easeInOut"
},
{
"at": 65,
"value": -8,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 1.08,
"easing": "easeInOut"
},
{
"at": 65,
"value": 0.94,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 1.08,
"easing": "easeInOut"
},
{
"at": 65,
"value": 0.94,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob04",
"type": "component",
"attributes": {
"transform": "matrix(.3 0 0 .3 35 35)",
"opacity": ".6"
},
"animations": [
{
"name": "wander",
"duration": 9,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": -3.972,
"easing": "easeInOut"
},
{
"at": 65,
"value": 4.3786,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": 5.0222,
"easing": "easeInOut"
},
{
"at": 65,
"value": -2.4141,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": -13,
"easing": "easeInOut"
},
{
"at": 65,
"value": 8,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 0.93,
"easing": "easeInOut"
},
{
"at": 65,
"value": 1.07,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 0.93,
"easing": "easeInOut"
},
{
"at": 65,
"value": 1.07,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
}
]
},
"trio": {
"elements": [
{
"name": "blob01",
"type": "component",
"attributes": {
"transform": "matrix(1.7 0 0 1.7 -35 -35)",
"opacity": ".22"
},
"animations": [
{
"name": "sway",
"duration": 18,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 3.2759,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -1.5061,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 9,
"easing": "easeInOut"
},
{
"at": 66,
"value": -5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 1.05,
"easing": "easeInOut"
},
{
"at": 66,
"value": 0.97,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob02",
"type": "component",
"attributes": {
"transform": "matrix(.95 0 0 .95 2.5 2.5)",
"opacity": ".38"
},
"animations": [
{
"name": "sway",
"duration": 14,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -2.6502,
"easing": "easeInOut"
},
{
"at": 66,
"value": 2.1667,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": 2.4447,
"easing": "easeInOut"
},
{
"at": 66,
"value": -1.8181,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 33,
"value": -9,
"easing": "easeInOut"
},
{
"at": 66,
"value": 5,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 33,
"value": 0.96,
"easing": "easeInOut"
},
{
"at": 66,
"value": 1.04,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
},
{
"name": "blob03",
"type": "component",
"attributes": {
"transform": "matrix(.42 0 0 .42 29 29)",
"opacity": ".6"
},
"animations": [
{
"name": "wander",
"duration": 11,
"tracks": {
"translateX": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": 5.7717,
"easing": "easeInOut"
},
{
"at": 65,
"value": -3.5436,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"translateY": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": -2.7727,
"easing": "easeInOut"
},
{
"at": 65,
"value": 3.5275,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"rotate": {
"keyframes": [
{
"at": 0,
"value": 0,
"easing": "easeInOut"
},
{
"at": 30,
"value": 13,
"easing": "easeInOut"
},
{
"at": 65,
"value": -8,
"easing": "easeInOut"
},
{
"at": 100,
"value": 0
}
]
},
"scaleX": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 1.08,
"easing": "easeInOut"
},
{
"at": 65,
"value": 0.94,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
},
"scaleY": {
"keyframes": [
{
"at": 0,
"value": 1,
"easing": "easeInOut"
},
{
"at": 30,
"value": 1.08,
"easing": "easeInOut"
},
{
"at": 65,
"value": 0.94,
"easing": "easeInOut"
},
{
"at": 100,
"value": 1
}
]
}
}
}
]
}
],
"weight": 2
}
}
}
},
"colors": {
"background": {
"values": [
"#0369a1",
"#047857",
"#0f766e",
"#1d4ed8",
"#1e293b",
"#4338ca",
"#6d28d9",
"#a21caf",
"#b45309",
"#be123c",
"#be185d",
"#c2410c"
]
},
"blob": {
"contrastTo": "background",
"values": [
"#ffffff",
"#000000"
]
}
}
}
''';