[{"data":1,"prerenderedAt":921},["ShallowReactive",2],{"content-navigation":3,"docs-shell-navigation":42,"content-page:\u002Fengine":53,"content-surround:\u002Fengine":917},[4,8,34,38],{"title":5,"path":6,"stem":7},"Getting Started","\u002Fgetting-started","01.getting-started",{"title":9,"path":10,"stem":11,"children":12,"page":33},"Components","\u002Fcomponents","02.components",[13,17,21,25,29],{"title":14,"path":15,"stem":16},"Avatar","\u002Fcomponents\u002Favatar","02.components\u002F01.avatar",{"title":18,"path":19,"stem":20},"GradientAvatar","\u002Fcomponents\u002Fgradient-avatar","02.components\u002F02.gradient-avatar",{"title":22,"path":23,"stem":24},"InitialsAvatar","\u002Fcomponents\u002Finitials-avatar","02.components\u002F03.initials-avatar",{"title":26,"path":27,"stem":28},"IdenticonAvatar","\u002Fcomponents\u002Fidenticon-avatar","02.components\u002F04.identicon-avatar",{"title":30,"path":31,"stem":32},"FlowFieldAvatar","\u002Fcomponents\u002Fflow-field-avatar","02.components\u002F05.flow-field-avatar",false,{"title":35,"path":36,"stem":37},"Custom Algorithm","\u002Fcustom-algorithm","03.custom-algorithm",{"title":39,"path":40,"stem":41},"Engine Helpers","\u002Fengine","04.engine",[43,44,51,52],{"title":5,"path":6,"stem":7},{"title":9,"path":10,"stem":11,"children":45,"page":33},[46,47,48,49,50],{"title":14,"path":15,"stem":16},{"title":18,"path":19,"stem":20},{"title":22,"path":23,"stem":24},{"title":26,"path":27,"stem":28},{"title":30,"path":31,"stem":32},{"title":35,"path":36,"stem":37},{"title":39,"path":40,"stem":41},{"id":54,"title":39,"body":55,"description":65,"extension":913,"meta":914,"navigation":466,"path":40,"seo":915,"stem":41,"__hash__":916},"docs\u002F04.engine.md",{"type":56,"value":57,"toc":905},"minimark",[58,62,66,71,235,407,411,513,517,633,637,679,683,694,832,836,898,901],[59,60,39],"h1",{"id":61},"engine-helpers",[63,64,65],"p",{},"The deterministic engines that power the components are exposed as plain functions. Use them for downloads, server rendering, custom integrations, or framework-independent SVG generation.",[67,68,70],"h2",{"id":69},"available-helpers","Available helpers",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  drawDitherGradient,\n  drawMeshGradient,\n  generateDitherGradient,\n  generateFlowFieldLines,\n  generateFlowFieldSvg,\n  generateGradientSvg,\n  generateIdenticonSvg,\n  generateInitialsSvg,\n  generateMeshGradient,\n  generatePalette,\n  gradientToBlob,\n  gradientToDataURL,\n  renderGradient,\n  seedFromString,\n  toSeed,\n} from '@maxnth\u002Fgestalt'\n","ts","",[79,80,81,94,104,112,120,128,136,144,152,160,168,176,184,192,200,208,216],"code",{"__ignoreMap":77},[82,83,86,90],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"s7zQu","import",[82,91,93],{"class":92},"sMK4o"," {\n",[82,95,97,101],{"class":84,"line":96},2,[82,98,100],{"class":99},"sTEyZ","  drawDitherGradient",[82,102,103],{"class":92},",\n",[82,105,107,110],{"class":84,"line":106},3,[82,108,109],{"class":99},"  drawMeshGradient",[82,111,103],{"class":92},[82,113,115,118],{"class":84,"line":114},4,[82,116,117],{"class":99},"  generateDitherGradient",[82,119,103],{"class":92},[82,121,123,126],{"class":84,"line":122},5,[82,124,125],{"class":99},"  generateFlowFieldLines",[82,127,103],{"class":92},[82,129,131,134],{"class":84,"line":130},6,[82,132,133],{"class":99},"  generateFlowFieldSvg",[82,135,103],{"class":92},[82,137,139,142],{"class":84,"line":138},7,[82,140,141],{"class":99},"  generateGradientSvg",[82,143,103],{"class":92},[82,145,147,150],{"class":84,"line":146},8,[82,148,149],{"class":99},"  generateIdenticonSvg",[82,151,103],{"class":92},[82,153,155,158],{"class":84,"line":154},9,[82,156,157],{"class":99},"  generateInitialsSvg",[82,159,103],{"class":92},[82,161,163,166],{"class":84,"line":162},10,[82,164,165],{"class":99},"  generateMeshGradient",[82,167,103],{"class":92},[82,169,171,174],{"class":84,"line":170},11,[82,172,173],{"class":99},"  generatePalette",[82,175,103],{"class":92},[82,177,179,182],{"class":84,"line":178},12,[82,180,181],{"class":99},"  gradientToBlob",[82,183,103],{"class":92},[82,185,187,190],{"class":84,"line":186},13,[82,188,189],{"class":99},"  gradientToDataURL",[82,191,103],{"class":92},[82,193,195,198],{"class":84,"line":194},14,[82,196,197],{"class":99},"  renderGradient",[82,199,103],{"class":92},[82,201,203,206],{"class":84,"line":202},15,[82,204,205],{"class":99},"  seedFromString",[82,207,103],{"class":92},[82,209,211,214],{"class":84,"line":210},16,[82,212,213],{"class":99},"  toSeed",[82,215,103],{"class":92},[82,217,219,222,225,228,232],{"class":84,"line":218},17,[82,220,221],{"class":92},"}",[82,223,224],{"class":88}," from",[82,226,227],{"class":92}," '",[82,229,231],{"class":230},"sfazB","@maxnth\u002Fgestalt",[82,233,234],{"class":92},"'\n",[236,237,238,251],"table",{},[239,240,241],"thead",{},[242,243,244,248],"tr",{},[245,246,247],"th",{},"Helper",[245,249,250],{},"Description",[252,253,254,265,275,289,299,313,323,333,343,353,363,373,383,393],"tbody",{},[242,255,256,262],{},[257,258,259],"td",{},[79,260,261],{},"drawDitherGradient(ctx, seed, size, variant?)",[257,263,264],{},"Paint palette-quantized dither cells into a 2D canvas context.",[242,266,267,272],{},[257,268,269],{},[79,270,271],{},"drawMeshGradient(ctx, seed, size)",[257,273,274],{},"Paint the raw mesh into a 2D canvas context.",[242,276,277,282],{},[257,278,279],{},[79,280,281],{},"renderGradient(canvas, seed, opts?)",[257,283,284,285,288],{},"Render a seed into a ",[79,286,287],{},"\u003Ccanvas>"," with the soft blur.",[242,290,291,296],{},[257,292,293],{},[79,294,295],{},"gradientToDataURL(seed, opts?)",[257,297,298],{},"Render and return a data URL.",[242,300,301,306],{},[257,302,303],{},[79,304,305],{},"gradientToBlob(seed, opts?)",[257,307,308,309,312],{},"Render and resolve a ",[79,310,311],{},"Blob",".",[242,314,315,320],{},[257,316,317],{},[79,318,319],{},"generatePalette(seed)",[257,321,322],{},"Get deterministic colors and harmony for a seed.",[242,324,325,330],{},[257,326,327],{},[79,328,329],{},"generateMeshGradient(seed, size, variant?)",[257,331,332],{},"Generate gradient geometry without browser APIs.",[242,334,335,340],{},[257,336,337],{},[79,338,339],{},"generateDitherGradient(seed, size, variant?)",[257,341,342],{},"Generate deterministic dither cells without browser APIs.",[242,344,345,350],{},[257,346,347],{},[79,348,349],{},"generateGradientSvg(seed, size?, idPrefix?, variant?, mode?)",[257,351,352],{},"Generate a complete gradient SVG document.",[242,354,355,360],{},[257,356,357],{},[79,358,359],{},"generateIdenticonSvg(seed, size?, opts?)",[257,361,362],{},"Generate a complete identicon SVG document.",[242,364,365,370],{},[257,366,367],{},[79,368,369],{},"generateInitialsSvg(seed, size?, opts?)",[257,371,372],{},"Generate a complete initials SVG document.",[242,374,375,380],{},[257,376,377],{},[79,378,379],{},"generateFlowFieldSvg(seed, size?, opts?)",[257,381,382],{},"Generate a complete flow-field SVG document.",[242,384,385,390],{},[257,386,387],{},[79,388,389],{},"generateFlowFieldLines(seed, size, opts?)",[257,391,392],{},"Generate deterministic flow-field streamlines.",[242,394,395,404],{},[257,396,397,400,401],{},[79,398,399],{},"seedFromString(input)"," \u002F ",[79,402,403],{},"toSeed(seed)",[257,405,406],{},"Normalize a value into the unsigned numeric seed.",[67,408,410],{"id":409},"generate-a-palette","Generate a palette",[72,412,414],{"className":74,"code":413,"language":76,"meta":77,"style":77},"const { seed, colors, harmony } = generatePalette('jane@example.com')\n\nconsole.log(seed) \u002F\u002F numeric seed\nconsole.log(colors) \u002F\u002F [\"#...\", \"#...\", ...]\nconsole.log(harmony) \u002F\u002F e.g. \"analogous\"\n",[79,415,416,462,468,485,499],{"__ignoreMap":77},[82,417,418,422,425,428,431,434,436,439,441,444,448,451,454,457,459],{"class":84,"line":85},[82,419,421],{"class":420},"spNyl","const",[82,423,424],{"class":92}," {",[82,426,427],{"class":99}," seed",[82,429,430],{"class":92},",",[82,432,433],{"class":99}," colors",[82,435,430],{"class":92},[82,437,438],{"class":99}," harmony ",[82,440,221],{"class":92},[82,442,443],{"class":92}," =",[82,445,447],{"class":446},"s2Zo4"," generatePalette",[82,449,450],{"class":99},"(",[82,452,453],{"class":92},"'",[82,455,456],{"class":230},"jane@example.com",[82,458,453],{"class":92},[82,460,461],{"class":99},")\n",[82,463,464],{"class":84,"line":96},[82,465,467],{"emptyLinePlaceholder":466},true,"\n",[82,469,470,473,475,478,481],{"class":84,"line":106},[82,471,472],{"class":99},"console",[82,474,312],{"class":92},[82,476,477],{"class":446},"log",[82,479,480],{"class":99},"(seed) ",[82,482,484],{"class":483},"sHwdD","\u002F\u002F numeric seed\n",[82,486,487,489,491,493,496],{"class":84,"line":114},[82,488,472],{"class":99},[82,490,312],{"class":92},[82,492,477],{"class":446},[82,494,495],{"class":99},"(colors) ",[82,497,498],{"class":483},"\u002F\u002F [\"#...\", \"#...\", ...]\n",[82,500,501,503,505,507,510],{"class":84,"line":122},[82,502,472],{"class":99},[82,504,312],{"class":92},[82,506,477],{"class":446},[82,508,509],{"class":99},"(harmony) ",[82,511,512],{"class":483},"\u002F\u002F e.g. \"analogous\"\n",[67,514,516],{"id":515},"export-as-data-url","Export as data URL",[72,518,520],{"className":74,"code":519,"language":76,"meta":77,"style":77},"\u002F\u002F 512×512 PNG data URL\nconst src = gradientToDataURL('jane@example.com', { size: 512 })\n\n\u002F\u002F Hard, palette-quantized pixels instead of the soft blur\nconst ditheredSrc = gradientToDataURL('jane@example.com', {\n  size: 512,\n  mode: 'dither',\n})\n",[79,521,522,527,568,572,577,600,611,627],{"__ignoreMap":77},[82,523,524],{"class":84,"line":85},[82,525,526],{"class":483},"\u002F\u002F 512×512 PNG data URL\n",[82,528,529,531,534,537,540,542,544,546,548,550,552,556,559,563,566],{"class":84,"line":96},[82,530,421],{"class":420},[82,532,533],{"class":99}," src ",[82,535,536],{"class":92},"=",[82,538,539],{"class":446}," gradientToDataURL",[82,541,450],{"class":99},[82,543,453],{"class":92},[82,545,456],{"class":230},[82,547,453],{"class":92},[82,549,430],{"class":92},[82,551,424],{"class":92},[82,553,555],{"class":554},"swJcz"," size",[82,557,558],{"class":92},":",[82,560,562],{"class":561},"sbssI"," 512",[82,564,565],{"class":92}," }",[82,567,461],{"class":99},[82,569,570],{"class":84,"line":106},[82,571,467],{"emptyLinePlaceholder":466},[82,573,574],{"class":84,"line":114},[82,575,576],{"class":483},"\u002F\u002F Hard, palette-quantized pixels instead of the soft blur\n",[82,578,579,581,584,586,588,590,592,594,596,598],{"class":84,"line":122},[82,580,421],{"class":420},[82,582,583],{"class":99}," ditheredSrc ",[82,585,536],{"class":92},[82,587,539],{"class":446},[82,589,450],{"class":99},[82,591,453],{"class":92},[82,593,456],{"class":230},[82,595,453],{"class":92},[82,597,430],{"class":92},[82,599,93],{"class":92},[82,601,602,605,607,609],{"class":84,"line":130},[82,603,604],{"class":554},"  size",[82,606,558],{"class":92},[82,608,562],{"class":561},[82,610,103],{"class":92},[82,612,613,616,618,620,623,625],{"class":84,"line":138},[82,614,615],{"class":554},"  mode",[82,617,558],{"class":92},[82,619,227],{"class":92},[82,621,622],{"class":230},"dither",[82,624,453],{"class":92},[82,626,103],{"class":92},[82,628,629,631],{"class":84,"line":146},[82,630,221],{"class":92},[82,632,461],{"class":99},[67,634,636],{"id":635},"export-as-blob","Export as Blob",[72,638,640],{"className":74,"code":639,"language":76,"meta":77,"style":77},"const blob = await gradientToBlob('jane@example.com', { size: 512 })\n",[79,641,642],{"__ignoreMap":77},[82,643,644,646,649,651,654,657,659,661,663,665,667,669,671,673,675,677],{"class":84,"line":85},[82,645,421],{"class":420},[82,647,648],{"class":99}," blob ",[82,650,536],{"class":92},[82,652,653],{"class":88}," await",[82,655,656],{"class":446}," gradientToBlob",[82,658,450],{"class":99},[82,660,453],{"class":92},[82,662,456],{"class":230},[82,664,453],{"class":92},[82,666,430],{"class":92},[82,668,424],{"class":92},[82,670,555],{"class":554},[82,672,558],{"class":92},[82,674,562],{"class":561},[82,676,565],{"class":92},[82,678,461],{"class":99},[67,680,682],{"id":681},"generate-svg-without-a-browser","Generate SVG without a browser",[63,684,685,686,689,690,693],{},"The SVG helpers return a framework-independent ",[79,687,688],{},"SvgAvatarDocument"," containing the complete ",[79,691,692],{},"viewBox"," and node tree. The same data powers the built-in Vue components during SSR.",[72,695,697],{"className":74,"code":696,"language":76,"meta":77,"style":77},"const identicon = generateIdenticonSvg('jane@example.com', 256, {\n  gridSize: 7,\n  foreground: '#38BDF8',\n  background: '#0F172A',\n})\n\nconst initials = generateInitialsSvg('Jane Doe', 256, {\n  mode: 'double',\n})\n",[79,698,699,728,740,756,772,778,782,811,826],{"__ignoreMap":77},[82,700,701,703,706,708,711,713,715,717,719,721,724,726],{"class":84,"line":85},[82,702,421],{"class":420},[82,704,705],{"class":99}," identicon ",[82,707,536],{"class":92},[82,709,710],{"class":446}," generateIdenticonSvg",[82,712,450],{"class":99},[82,714,453],{"class":92},[82,716,456],{"class":230},[82,718,453],{"class":92},[82,720,430],{"class":92},[82,722,723],{"class":561}," 256",[82,725,430],{"class":92},[82,727,93],{"class":92},[82,729,730,733,735,738],{"class":84,"line":96},[82,731,732],{"class":554},"  gridSize",[82,734,558],{"class":92},[82,736,737],{"class":561}," 7",[82,739,103],{"class":92},[82,741,742,745,747,749,752,754],{"class":84,"line":106},[82,743,744],{"class":554},"  foreground",[82,746,558],{"class":92},[82,748,227],{"class":92},[82,750,751],{"class":230},"#38BDF8",[82,753,453],{"class":92},[82,755,103],{"class":92},[82,757,758,761,763,765,768,770],{"class":84,"line":114},[82,759,760],{"class":554},"  background",[82,762,558],{"class":92},[82,764,227],{"class":92},[82,766,767],{"class":230},"#0F172A",[82,769,453],{"class":92},[82,771,103],{"class":92},[82,773,774,776],{"class":84,"line":122},[82,775,221],{"class":92},[82,777,461],{"class":99},[82,779,780],{"class":84,"line":130},[82,781,467],{"emptyLinePlaceholder":466},[82,783,784,786,789,791,794,796,798,801,803,805,807,809],{"class":84,"line":138},[82,785,421],{"class":420},[82,787,788],{"class":99}," initials ",[82,790,536],{"class":92},[82,792,793],{"class":446}," generateInitialsSvg",[82,795,450],{"class":99},[82,797,453],{"class":92},[82,799,800],{"class":230},"Jane Doe",[82,802,453],{"class":92},[82,804,430],{"class":92},[82,806,723],{"class":561},[82,808,430],{"class":92},[82,810,93],{"class":92},[82,812,813,815,817,819,822,824],{"class":84,"line":146},[82,814,615],{"class":554},[82,816,558],{"class":92},[82,818,227],{"class":92},[82,820,821],{"class":230},"double",[82,823,453],{"class":92},[82,825,103],{"class":92},[82,827,828,830],{"class":84,"line":154},[82,829,221],{"class":92},[82,831,461],{"class":99},[67,833,835],{"id":834},"input-limits-and-colors","Input limits and colors",[837,838,839,850,861,877,880],"ul",{},[840,841,842,843,846,847,312],"li",{},"Numeric seeds are normalized to unsigned 32-bit integers. ",[79,844,845],{},"NaN"," and infinite seeds become ",[79,848,849],{},"0",[840,851,852,853,856,857,860],{},"Generator sizes are rounded and clamped from ",[79,854,855],{},"1"," through ",[79,858,859],{},"4096",". Non-finite sizes use the helper's default.",[840,862,863,864,867,868,856,870,873,874,312],{},"Identicon ",[79,865,866],{},"gridSize"," is rounded and clamped from ",[79,869,855],{},[79,871,872],{},"64","; its default is ",[79,875,876],{},"5",[840,878,879],{},"Flow-field counts, geometry, and opacity are clamped to their documented safe ranges.",[840,881,882,883,886,887,890,891,893,894,897],{},"Built-in color options support CSS hexadecimal ",[79,884,885],{},"#RGB"," and ",[79,888,889],{},"#RRGGBB"," only, case-insensitively. Valid colors are normalized to uppercase ",[79,892,889],{},". Invalid overrides fall back to deterministic generated colors; invalid entries in a flow-field ",[79,895,896],{},"colors"," array are ignored.",[63,899,900],{},"This deliberately narrow color contract keeps automatic contrast and complete SVG output identical in browsers, Node.js SSR, and other runtimes.",[902,903,904],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":77,"searchDepth":106,"depth":106,"links":906},[907,908,909,910,911,912],{"id":69,"depth":96,"text":70},{"id":409,"depth":96,"text":410},{"id":515,"depth":96,"text":516},{"id":635,"depth":96,"text":636},{"id":681,"depth":96,"text":682},{"id":834,"depth":96,"text":835},"md",{},{"title":39,"description":65},"9fopTfjAR0eX7R786wPtjAop9ryqT4B1E8vV7PflB6c",[918,920],{"title":35,"path":36,"stem":37,"description":919,"children":-1},"One of the core ideas behind @maxnth\u002Fgestalt is that avatars are just deterministic drawing functions. You can write your own algorithm and plug it into the generic \u003CAvatar> component.",null,1784287256267]