[{"data":1,"prerenderedAt":867},["ShallowReactive",2],{"content-navigation":3,"docs-shell-navigation":42,"content-page:\u002Fcomponents\u002Favatar":53,"content-surround:\u002Fcomponents\u002Favatar":862},[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":14,"body":55,"description":857,"extension":858,"meta":859,"navigation":156,"path":15,"seo":860,"stem":16,"__hash__":861},"docs\u002F02.components\u002F01.avatar.md",{"type":56,"value":57,"toc":852},"minimark",[58,62,71,76,240,244,447,451,459,755,760,849],[59,60,14],"h1",{"id":61},"avatar",[63,64,65,66,70],"p",{},"The low-level ",[67,68,69],"code",{},"\u003CAvatar>"," component lets you swap rendering algorithms or plug in your own.",[72,73,75],"h2",{"id":74},"usage","Usage",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { Avatar, gradientAvatarAlgorithm } from '@maxnth\u002Fgestalt'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAvatar\n    seed=\"user-123\"\n    :size=\"80\"\n    :algorithm=\"gradientAvatarAlgorithm\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[67,84,85,105,141,151,158,168,177,195,210,225,231],{"__ignoreMap":82},[86,87,90,94,98,102],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sMK4o","\u003C",[86,95,97],{"class":96},"swJcz","script",[86,99,101],{"class":100},"spNyl"," setup",[86,103,104],{"class":92},">\n",[86,106,108,112,115,119,122,125,128,131,134,138],{"class":88,"line":107},2,[86,109,111],{"class":110},"s7zQu","import",[86,113,114],{"class":92}," {",[86,116,118],{"class":117},"sTEyZ"," Avatar",[86,120,121],{"class":92},",",[86,123,124],{"class":117}," gradientAvatarAlgorithm",[86,126,127],{"class":92}," }",[86,129,130],{"class":110}," from",[86,132,133],{"class":92}," '",[86,135,137],{"class":136},"sfazB","@maxnth\u002Fgestalt",[86,139,140],{"class":92},"'\n",[86,142,144,147,149],{"class":88,"line":143},3,[86,145,146],{"class":92},"\u003C\u002F",[86,148,97],{"class":96},[86,150,104],{"class":92},[86,152,154],{"class":88,"line":153},4,[86,155,157],{"emptyLinePlaceholder":156},true,"\n",[86,159,161,163,166],{"class":88,"line":160},5,[86,162,93],{"class":92},[86,164,165],{"class":96},"template",[86,167,104],{"class":92},[86,169,171,174],{"class":88,"line":170},6,[86,172,173],{"class":92},"  \u003C",[86,175,176],{"class":96},"Avatar\n",[86,178,180,183,186,189,192],{"class":88,"line":179},7,[86,181,182],{"class":100},"    seed",[86,184,185],{"class":92},"=",[86,187,188],{"class":92},"\"",[86,190,191],{"class":136},"user-123",[86,193,194],{"class":92},"\"\n",[86,196,198,201,203,205,208],{"class":88,"line":197},8,[86,199,200],{"class":100},"    :size",[86,202,185],{"class":92},[86,204,188],{"class":92},[86,206,207],{"class":136},"80",[86,209,194],{"class":92},[86,211,213,216,218,220,223],{"class":88,"line":212},9,[86,214,215],{"class":100},"    :algorithm",[86,217,185],{"class":92},[86,219,188],{"class":92},[86,221,222],{"class":136},"gradientAvatarAlgorithm",[86,224,194],{"class":92},[86,226,228],{"class":88,"line":227},10,[86,229,230],{"class":92},"  \u002F>\n",[86,232,234,236,238],{"class":88,"line":233},11,[86,235,146],{"class":92},[86,237,165],{"class":96},[86,239,104],{"class":92},[72,241,243],{"id":242},"props","Props",[245,246,247,266],"table",{},[248,249,250],"thead",{},[251,252,253,257,260,263],"tr",{},[254,255,256],"th",{},"Prop",[254,258,259],{},"Type",[254,261,262],{},"Default",[254,264,265],{},"Description",[267,268,269,288,308,328,353,370,389,406,430],"tbody",{},[251,270,271,277,282,285],{},[272,273,274],"td",{},[67,275,276],{},"seed",[272,278,279],{},[67,280,281],{},"string | number",[272,283,284],{},"—",[272,286,287],{},"Any value; passed through to the algorithm.",[251,289,290,295,300,305],{},[272,291,292],{},[67,293,294],{},"size",[272,296,297],{},[67,298,299],{},"number",[272,301,302],{},[67,303,304],{},"32",[272,306,307],{},"Rendered size in pixels.",[251,309,310,315,320,325],{},[272,311,312],{},[67,313,314],{},"radius",[272,316,317],{},[67,318,319],{},"number | string",[272,321,322],{},[67,323,324],{},"\"9999px\"",[272,326,327],{},"Corner radius. Number is pixels; string is CSS.",[251,329,330,335,340,342],{},[272,331,332],{},[67,333,334],{},"algorithm",[272,336,337],{},[67,338,339],{},"AvatarAlgorithm",[272,341,284],{},[272,343,344,345,348,349,352],{},"Algorithm object with ",[67,346,347],{},"name"," and ",[67,350,351],{},"render",".",[251,354,355,360,365,367],{},[272,356,357],{},[67,358,359],{},"options",[272,361,362],{},[67,363,364],{},"unknown",[272,366,284],{},[272,368,369],{},"Algorithm-specific options.",[251,371,372,377,381,386],{},[272,373,374],{},[67,375,376],{},"renderSize",[272,378,379],{},[67,380,299],{},[272,382,383],{},[67,384,385],{},"256",[272,387,388],{},"Internal canvas resolution.",[251,390,391,396,401,403],{},[272,392,393],{},[67,394,395],{},"ariaLabel",[272,397,398],{},[67,399,400],{},"string",[272,402,284],{},[272,404,405],{},"Accessible label for the canvas.",[251,407,408,413,418,423],{},[272,409,410],{},[67,411,412],{},"ring",[272,414,415],{},[67,416,417],{},"boolean | number | string",[272,419,420],{},[67,421,422],{},"false",[272,424,425,426,429],{},"Optional outline. ",[67,427,428],{},"true"," = white 2px ring.",[251,431,432,437,442,444],{},[272,433,434],{},[67,435,436],{},"style",[272,438,439],{},[67,440,441],{},"object",[272,443,284],{},[272,445,446],{},"Extra inline styles merged onto the wrapper.",[72,448,450],{"id":449},"writing-a-custom-algorithm","Writing a custom algorithm",[63,452,453,454,348,456,458],{},"An algorithm is just an object with ",[67,455,347],{},[67,457,351],{},":",[77,460,464],{"className":461,"code":462,"language":463,"meta":82,"style":82},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { AlgorithmRenderContext, AvatarAlgorithm } from '@maxnth\u002Fgestalt'\n\nconst stripeAlgorithm: AvatarAlgorithm = {\n  name: 'stripe',\n  render({ ctx, size }: AlgorithmRenderContext, options) {\n    const opts = options as { color?: string }\n    const segments = 4\n    const segmentHeight = size \u002F segments\n    ctx.fillStyle = opts?.color ?? '#3b82f6'\n    for (let i = 0; i \u003C segments; i += 2) {\n      ctx.fillRect(0, i * segmentHeight, size, segmentHeight)\n    }\n  },\n}\n","ts",[67,465,466,493,497,516,534,566,595,608,625,655,700,737,743,749],{"__ignoreMap":82},[86,467,468,470,473,475,478,480,483,485,487,489,491],{"class":88,"line":89},[86,469,111],{"class":110},[86,471,472],{"class":110}," type",[86,474,114],{"class":92},[86,476,477],{"class":117}," AlgorithmRenderContext",[86,479,121],{"class":92},[86,481,482],{"class":117}," AvatarAlgorithm",[86,484,127],{"class":92},[86,486,130],{"class":110},[86,488,133],{"class":92},[86,490,137],{"class":136},[86,492,140],{"class":92},[86,494,495],{"class":88,"line":107},[86,496,157],{"emptyLinePlaceholder":156},[86,498,499,502,505,507,510,513],{"class":88,"line":143},[86,500,501],{"class":100},"const",[86,503,504],{"class":117}," stripeAlgorithm",[86,506,458],{"class":92},[86,508,482],{"class":509},"sBMFI",[86,511,512],{"class":92}," =",[86,514,515],{"class":92}," {\n",[86,517,518,521,523,525,528,531],{"class":88,"line":153},[86,519,520],{"class":96},"  name",[86,522,458],{"class":92},[86,524,133],{"class":92},[86,526,527],{"class":136},"stripe",[86,529,530],{"class":92},"'",[86,532,533],{"class":92},",\n",[86,535,536,539,542,546,548,551,554,556,558,561,564],{"class":88,"line":160},[86,537,538],{"class":96},"  render",[86,540,541],{"class":92},"({",[86,543,545],{"class":544},"sHdIc"," ctx",[86,547,121],{"class":92},[86,549,550],{"class":544}," size",[86,552,553],{"class":92}," }:",[86,555,477],{"class":509},[86,557,121],{"class":92},[86,559,560],{"class":544}," options",[86,562,563],{"class":92},")",[86,565,515],{"class":92},[86,567,568,571,574,576,578,581,583,586,589,592],{"class":88,"line":170},[86,569,570],{"class":100},"    const",[86,572,573],{"class":117}," opts",[86,575,512],{"class":92},[86,577,560],{"class":117},[86,579,580],{"class":110}," as",[86,582,114],{"class":92},[86,584,585],{"class":96}," color",[86,587,588],{"class":92},"?:",[86,590,591],{"class":509}," string",[86,593,594],{"class":92}," }\n",[86,596,597,599,602,604],{"class":88,"line":179},[86,598,570],{"class":100},[86,600,601],{"class":117}," segments",[86,603,512],{"class":92},[86,605,607],{"class":606},"sbssI"," 4\n",[86,609,610,612,615,617,619,622],{"class":88,"line":197},[86,611,570],{"class":100},[86,613,614],{"class":117}," segmentHeight",[86,616,512],{"class":92},[86,618,550],{"class":117},[86,620,621],{"class":92}," \u002F",[86,623,624],{"class":117}," segments\n",[86,626,627,630,632,635,637,639,642,645,648,650,653],{"class":88,"line":212},[86,628,629],{"class":117},"    ctx",[86,631,352],{"class":92},[86,633,634],{"class":117},"fillStyle",[86,636,512],{"class":92},[86,638,573],{"class":117},[86,640,641],{"class":92},"?.",[86,643,644],{"class":117},"color",[86,646,647],{"class":92}," ??",[86,649,133],{"class":92},[86,651,652],{"class":136},"#3b82f6",[86,654,140],{"class":92},[86,656,657,660,663,666,669,671,674,677,679,682,684,686,688,691,694,697],{"class":88,"line":227},[86,658,659],{"class":110},"    for",[86,661,662],{"class":96}," (",[86,664,665],{"class":100},"let",[86,667,668],{"class":117}," i",[86,670,512],{"class":92},[86,672,673],{"class":606}," 0",[86,675,676],{"class":92},";",[86,678,668],{"class":117},[86,680,681],{"class":92}," \u003C",[86,683,601],{"class":117},[86,685,676],{"class":92},[86,687,668],{"class":117},[86,689,690],{"class":92}," +=",[86,692,693],{"class":606}," 2",[86,695,696],{"class":96},") ",[86,698,699],{"class":92},"{\n",[86,701,702,705,707,711,714,717,719,721,724,726,728,730,732,734],{"class":88,"line":233},[86,703,704],{"class":117},"      ctx",[86,706,352],{"class":92},[86,708,710],{"class":709},"s2Zo4","fillRect",[86,712,713],{"class":96},"(",[86,715,716],{"class":606},"0",[86,718,121],{"class":92},[86,720,668],{"class":117},[86,722,723],{"class":92}," *",[86,725,614],{"class":117},[86,727,121],{"class":92},[86,729,550],{"class":117},[86,731,121],{"class":92},[86,733,614],{"class":117},[86,735,736],{"class":96},")\n",[86,738,740],{"class":88,"line":739},12,[86,741,742],{"class":92},"    }\n",[86,744,746],{"class":88,"line":745},13,[86,747,748],{"class":92},"  },\n",[86,750,752],{"class":88,"line":751},14,[86,753,754],{"class":92},"}\n",[63,756,757,758,458],{},"Then pass it to ",[67,759,69],{},[77,761,763],{"className":79,"code":762,"language":81,"meta":82,"style":82},"\u003CAvatar\n  seed=\"stripe-demo\"\n  :size=\"96\"\n  :algorithm=\"stripeAlgorithm\"\n  :options=\"{ color: '#10b981' }\"\n\u002F>\n",[67,764,765,771,785,801,816,844],{"__ignoreMap":82},[86,766,767,769],{"class":88,"line":89},[86,768,93],{"class":92},[86,770,176],{"class":96},[86,772,773,776,778,780,783],{"class":88,"line":107},[86,774,775],{"class":100},"  seed",[86,777,185],{"class":92},[86,779,188],{"class":92},[86,781,782],{"class":136},"stripe-demo",[86,784,194],{"class":92},[86,786,787,790,792,794,796,799],{"class":88,"line":143},[86,788,789],{"class":92},"  :",[86,791,294],{"class":100},[86,793,185],{"class":92},[86,795,188],{"class":92},[86,797,798],{"class":606},"96",[86,800,194],{"class":92},[86,802,803,805,807,809,811,814],{"class":88,"line":153},[86,804,789],{"class":92},[86,806,334],{"class":100},[86,808,185],{"class":92},[86,810,188],{"class":92},[86,812,813],{"class":117},"stripeAlgorithm",[86,815,194],{"class":92},[86,817,818,820,822,824,826,829,831,833,835,838,840,842],{"class":88,"line":160},[86,819,789],{"class":92},[86,821,359],{"class":100},[86,823,185],{"class":92},[86,825,188],{"class":92},[86,827,828],{"class":92},"{",[86,830,585],{"class":96},[86,832,458],{"class":92},[86,834,133],{"class":92},[86,836,837],{"class":136},"#10b981",[86,839,530],{"class":92},[86,841,127],{"class":92},[86,843,194],{"class":92},[86,845,846],{"class":88,"line":170},[86,847,848],{"class":117},"\u002F>\n",[436,850,851],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":82,"searchDepth":143,"depth":143,"links":853},[854,855,856],{"id":74,"depth":107,"text":75},{"id":242,"depth":107,"text":243},{"id":449,"depth":107,"text":450},"The low-level \u003CAvatar> component lets you swap rendering algorithms or plug in your own.","md",{},{"title":14,"description":857},"uh0AMYTcw1iTjmcknzFH0aDMewFrs7iRSZqhxQDjrzA",[863,865],{"title":5,"path":6,"stem":7,"description":864,"children":-1},"Generate beautiful, deterministic avatars for your Vue 3 apps without fetching a single image.",{"title":18,"path":19,"stem":20,"description":866,"children":-1},"The \u003CGradientAvatar> component renders a deterministic, soft mesh-gradient avatar from any seed.",1784287256264]