waves top-level constant
String
const waves
Raw JSON definition of the DiceBear waves avatar style.
Implementation
const String waves = '''{
"\$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": "„Waves” (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": "Waves",
"url": "https://www.dicebear.com"
}
},
"canvas": {
"elements": [
{
"name": "rotation",
"type": "component"
},
{
"name": "animation",
"type": "component"
}
],
"width": 100,
"height": 100
},
"attributes": {
"fill": "none",
"shape-rendering": "auto"
},
"components": {
"rotation": {
"width": 100,
"height": 100,
"variants": {
"quarter": {
"elements": [
{
"name": "bodyQuarter",
"type": "component"
}
],
"weight": 0
},
"none": {
"elements": [
{
"name": "body",
"type": "component"
}
],
"weight": 0
},
"free": {
"elements": [
{
"name": "bodyFree",
"type": "component"
}
]
}
}
},
"bodyQuarter": {
"width": 100,
"height": 100,
"rotate": {
"min": 0,
"max": 270,
"step": 90
},
"variants": {
"default": {
"elements": [
{
"name": "body",
"type": "component"
}
]
}
}
},
"bodyFree": {
"width": 100,
"height": 100,
"rotate": {
"min": -180,
"max": 180
},
"variants": {
"default": {
"elements": [
{
"name": "body",
"type": "component"
}
]
}
}
},
"body": {
"width": 100,
"height": 100,
"variants": {
"trio": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".2"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l1"
},
"children": [
{
"name": "layer01",
"type": "component",
"attributes": {
"transform": "translate(-50 8)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".35"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l2"
},
"children": [
{
"name": "layer02",
"type": "component",
"attributes": {
"transform": "translate(-50 32)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".5"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l3"
},
"children": [
{
"name": "layer03",
"type": "component",
"attributes": {
"transform": "translate(-50 56)"
}
}
]
}
]
}
]
},
"quartet": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".16"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l1"
},
"children": [
{
"name": "layer01",
"type": "component",
"attributes": {
"transform": "translate(-50)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".28"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l2"
},
"children": [
{
"name": "layer02",
"type": "component",
"attributes": {
"transform": "translate(-50 22)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".4"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l3"
},
"children": [
{
"name": "layer03",
"type": "component",
"attributes": {
"transform": "translate(-50 44)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".52"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l4"
},
"children": [
{
"name": "layer04",
"type": "component",
"attributes": {
"transform": "translate(-50 66)"
}
}
]
}
]
}
],
"weight": 2
},
"quintet": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".14"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l1"
},
"children": [
{
"name": "layer01",
"type": "component",
"attributes": {
"transform": "translate(-50)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".24"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l2"
},
"children": [
{
"name": "layer02",
"type": "component",
"attributes": {
"transform": "translate(-50 17)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".34"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l3"
},
"children": [
{
"name": "layer03",
"type": "component",
"attributes": {
"transform": "translate(-50 34)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".42"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l4"
},
"children": [
{
"name": "layer04",
"type": "component",
"attributes": {
"transform": "translate(-50 51)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".48"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l5"
},
"children": [
{
"name": "layer05",
"type": "component",
"attributes": {
"transform": "translate(-50 68)"
}
}
]
}
]
}
],
"weight": 2
},
"sextet": {
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".12"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l1"
},
"children": [
{
"name": "layer01",
"type": "component",
"attributes": {
"transform": "translate(-50)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".2"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l2"
},
"children": [
{
"name": "layer02",
"type": "component",
"attributes": {
"transform": "translate(-50 14)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".28"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l3"
},
"children": [
{
"name": "layer03",
"type": "component",
"attributes": {
"transform": "translate(-50 28)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".34"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l4"
},
"children": [
{
"name": "layer04",
"type": "component",
"attributes": {
"transform": "translate(-50 42)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".4"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l5"
},
"children": [
{
"name": "layer05",
"type": "component",
"attributes": {
"transform": "translate(-50 56)"
}
}
]
}
]
},
{
"name": "g",
"type": "element",
"attributes": {
"opacity": ".46"
},
"children": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-l6"
},
"children": [
{
"name": "layer06",
"type": "component",
"attributes": {
"transform": "translate(-50 70)"
}
}
]
}
]
}
]
}
}
},
"layer": {
"width": 200,
"height": 130,
"translate": {
"x": {
"min": -12,
"max": 12
},
"y": {
"min": -3.6923,
"max": 3.6923
}
},
"variants": {
"calm": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 16c28 0 52-6 84-5s72 10 116 5v114H0Z",
"fill": {
"type": "color",
"name": "wave"
}
}
}
]
},
"rolling": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 8c12 0 23 16 35 16S58 8 70 8s23 16 35 16 23-16 35-16 23 16 35 16c8 0 17-8 25-10v116H0Z",
"fill": {
"type": "color",
"name": "wave"
}
}
}
]
},
"swell": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 24C25 24 35 0 62 0c22 0 34 20 56 22 18 1 30-10 48-10 12 0 24 6 34 8v110H0Z",
"fill": {
"type": "color",
"name": "wave"
}
}
}
]
},
"ripple": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 12c6 0 12 10 18 10s12-10 18-10 12 10 18 10 12-10 18-10 12 10 18 10 12-10 18-10 12 10 18 10 12-10 18-10 12 10 18 10 12-10 18-10 12 6 20 5v113H0Z",
"fill": {
"type": "color",
"name": "wave"
}
}
}
]
},
"surge": {
"elements": [
{
"name": "path",
"type": "element",
"attributes": {
"d": "M0 6c24 0 44 4 62 14 16 8 34 8 52 2 20-7 38-12 54-12 12 0 24 4 32 6v114H0Z",
"fill": {
"type": "color",
"name": "wave"
}
}
}
]
}
}
},
"layer01": {
"extends": "layer"
},
"layer02": {
"extends": "layer"
},
"layer03": {
"extends": "layer"
},
"layer04": {
"extends": "layer"
},
"layer05": {
"extends": "layer"
},
"layer06": {
"extends": "layer"
},
"animation": {
"width": 100,
"height": 100,
"variants": {
"none": {
"elements": []
},
"fastest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-fastest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbwa-fastest){--dbwa-t:0.75;--dbwa-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbwaDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}} @keyframes dbwaDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}} .dbwa-l1{animation:dbwaDriftA calc(var(--dbwa-t,1)*20s) ease-in-out infinite} .dbwa-l2{animation:dbwaDriftB calc(var(--dbwa-t,1)*16.5s) ease-in-out infinite} .dbwa-l3{animation:dbwaDriftA calc(var(--dbwa-t,1)*13.5s) ease-in-out infinite} .dbwa-l4{animation:dbwaDriftB calc(var(--dbwa-t,1)*11s) ease-in-out infinite} .dbwa-l5{animation:dbwaDriftA calc(var(--dbwa-t,1)*9.5s) ease-in-out infinite} .dbwa-l6{animation:dbwaDriftB calc(var(--dbwa-t,1)*8s) ease-in-out infinite}.dbwa-l1,.dbwa-l2,.dbwa-l3,.dbwa-l4,.dbwa-l5,.dbwa-l6{animation-play-state:var(--dbwa-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"fast": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-fast"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbwa-fast){--dbwa-t:0.9;--dbwa-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbwaDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}} @keyframes dbwaDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}} .dbwa-l1{animation:dbwaDriftA calc(var(--dbwa-t,1)*20s) ease-in-out infinite} .dbwa-l2{animation:dbwaDriftB calc(var(--dbwa-t,1)*16.5s) ease-in-out infinite} .dbwa-l3{animation:dbwaDriftA calc(var(--dbwa-t,1)*13.5s) ease-in-out infinite} .dbwa-l4{animation:dbwaDriftB calc(var(--dbwa-t,1)*11s) ease-in-out infinite} .dbwa-l5{animation:dbwaDriftA calc(var(--dbwa-t,1)*9.5s) ease-in-out infinite} .dbwa-l6{animation:dbwaDriftB calc(var(--dbwa-t,1)*8s) ease-in-out infinite}.dbwa-l1,.dbwa-l2,.dbwa-l3,.dbwa-l4,.dbwa-l5,.dbwa-l6{animation-play-state:var(--dbwa-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"medium": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-medium"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbwa-medium){--dbwa-t:1;--dbwa-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbwaDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}} @keyframes dbwaDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}} .dbwa-l1{animation:dbwaDriftA calc(var(--dbwa-t,1)*20s) ease-in-out infinite} .dbwa-l2{animation:dbwaDriftB calc(var(--dbwa-t,1)*16.5s) ease-in-out infinite} .dbwa-l3{animation:dbwaDriftA calc(var(--dbwa-t,1)*13.5s) ease-in-out infinite} .dbwa-l4{animation:dbwaDriftB calc(var(--dbwa-t,1)*11s) ease-in-out infinite} .dbwa-l5{animation:dbwaDriftA calc(var(--dbwa-t,1)*9.5s) ease-in-out infinite} .dbwa-l6{animation:dbwaDriftB calc(var(--dbwa-t,1)*8s) ease-in-out infinite}.dbwa-l1,.dbwa-l2,.dbwa-l3,.dbwa-l4,.dbwa-l5,.dbwa-l6{animation-play-state:var(--dbwa-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slow": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-slow"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbwa-slow){--dbwa-t:1.15;--dbwa-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbwaDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}} @keyframes dbwaDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}} .dbwa-l1{animation:dbwaDriftA calc(var(--dbwa-t,1)*20s) ease-in-out infinite} .dbwa-l2{animation:dbwaDriftB calc(var(--dbwa-t,1)*16.5s) ease-in-out infinite} .dbwa-l3{animation:dbwaDriftA calc(var(--dbwa-t,1)*13.5s) ease-in-out infinite} .dbwa-l4{animation:dbwaDriftB calc(var(--dbwa-t,1)*11s) ease-in-out infinite} .dbwa-l5{animation:dbwaDriftA calc(var(--dbwa-t,1)*9.5s) ease-in-out infinite} .dbwa-l6{animation:dbwaDriftB calc(var(--dbwa-t,1)*8s) ease-in-out infinite}.dbwa-l1,.dbwa-l2,.dbwa-l3,.dbwa-l4,.dbwa-l5,.dbwa-l6{animation-play-state:var(--dbwa-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
},
"slowest": {
"weight": 0,
"elements": [
{
"name": "g",
"type": "element",
"attributes": {
"class": "dbwa-slowest"
}
},
{
"name": "style",
"type": "element",
"children": [
{
"type": "text",
"value": "svg:has(.dbwa-slowest){--dbwa-t:1.35;--dbwa-p:running}@media (prefers-reduced-motion: no-preference){@keyframes dbwaDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}} @keyframes dbwaDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}} .dbwa-l1{animation:dbwaDriftA calc(var(--dbwa-t,1)*20s) ease-in-out infinite} .dbwa-l2{animation:dbwaDriftB calc(var(--dbwa-t,1)*16.5s) ease-in-out infinite} .dbwa-l3{animation:dbwaDriftA calc(var(--dbwa-t,1)*13.5s) ease-in-out infinite} .dbwa-l4{animation:dbwaDriftB calc(var(--dbwa-t,1)*11s) ease-in-out infinite} .dbwa-l5{animation:dbwaDriftA calc(var(--dbwa-t,1)*9.5s) ease-in-out infinite} .dbwa-l6{animation:dbwaDriftB calc(var(--dbwa-t,1)*8s) ease-in-out infinite}.dbwa-l1,.dbwa-l2,.dbwa-l3,.dbwa-l4,.dbwa-l5,.dbwa-l6{animation-play-state:var(--dbwa-p,paused)}}"
}
]
}
],
"tags": [
"animation"
]
}
}
}
},
"colors": {
"background": {
"values": [
"#0369a1",
"#1d4ed8",
"#4338ca",
"#6d28d9",
"#a21caf",
"#be185d",
"#be123c",
"#c2410c",
"#b45309",
"#047857",
"#0f766e",
"#1e293b"
]
},
"wave": {
"contrastTo": "background",
"values": [
"#ffffff",
"#000000"
]
}
}
}
''';