[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fshape":129},{"stars":4},5505,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":131,"body":132,"categoryId":1052,"categorySlug":1052,"categoryTitle":1053,"curated":466,"description":1054,"editUrl":1055,"extension":1056,"group":1057,"groupTitle":1058,"kind":1053,"meta":1059,"navigation":466,"path":1060,"seo":1061,"sourceUrl":1062,"stem":1063,"wordCount":695,"__hash__":1064},"primitives\u002Fdocs\u002Fprimitives\u002F18.shape\u002Findex.md","Shapes",{"type":133,"value":134,"toc":1047},"minimark",[135,139,148,205,234,239,441,445,916,920,1043],[136,137,131],"h1",{"id":138},"shapes",[140,141,142,143,147],"p",{},"The 2D shapes: a circle, a star, a heart and a dozen more, each as a function of a point\nthat tells you how far that point is from the shape's edge. The number is a ",[144,145,146],"strong",{},"signed\ndistance",": negative inside, zero on the edge, positive outside. Sizes are in uv, where 1 is\nthe canvas height.",[140,149,150,151,154,155,158,159,162,163,166,167,170,171,174,175,178,179,181,182,181,185,188,189,192,193,196,197,200,201,204],{},"A shape becomes a component through the ",[10,152,153],{},"shape:"," field of ",[10,156,157],{},"defineShader",". Its ",[10,160,161],{},"distance","\nreceives the shape-local point (already centred on the ",[10,164,165],{},"center"," prop, aspect-corrected,\nrotated and y down) and ",[10,168,169],{},"u('name')"," for each of your size props, and returns one of these\nwords. ",[10,172,173],{},"shapeProps"," declares those size props. ",[10,176,177],{},"bounds"," names the props that size the\nselection box in the editor. The engine adds the ",[10,180,165],{},", ",[10,183,184],{},"rotation",[10,186,187],{},"color",", stroke and\nsoftness props, the bounding box and the anti-aliased pixel mask, so a shape shader is a\nfew lines. Shapes also combine with ",[10,190,191],{},"math",": ",[10,194,195],{},"mix"," two distances to morph between them,\n",[10,198,199],{},"min"," for a union, ",[10,202,203],{},"max"," for an intersection.",[206,207,212],"pre",{"className":208,"code":209,"language":210,"meta":211,"style":211},"language-ts shiki shiki-themes github-dark","import {shape} from 'shaders\u002Fstd'\n","ts","",[10,213,214],{"__ignoreMap":211},[215,216,219,223,227,230],"span",{"class":217,"line":218},"line",1,[215,220,222],{"class":221},"snl16","import",[215,224,226],{"class":225},"s95oV"," {shape} ",[215,228,229],{"class":221},"from",[215,231,233],{"class":232},"sU2Wk"," 'shaders\u002Fstd'\n",[235,236,238],"h2",{"id":237},"reach-for-it-when","Reach for it when",[240,241,242,255],"table",{},[243,244,245],"thead",{},[246,247,248,252],"tr",{},[249,250,251],"th",{},"When you need",[249,253,254],{},"Use",[256,257,258,273,286,299,312,331,344,364,395,414,427],"tbody",{},[246,259,260,264],{},[261,262,263],"td",{},"a disc",[261,265,266],{},[267,268,270],"a",{"href":269},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcircle",[10,271,272],{},"circle",[246,274,275,278],{},[261,276,277],{},"an oval",[261,279,280],{},[267,281,283],{"href":282},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fellipse",[10,284,285],{},"ellipse",[246,287,288,291],{},[261,289,290],{},"a card, a button, a pill",[261,292,293],{},[267,294,296],{"href":295},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Froundedrect",[10,297,298],{},"roundedRect",[246,300,301,304],{},[261,302,303],{},"a triangle, a hexagon, any regular polygon",[261,305,306],{},[267,307,309],{"href":308},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fpolygon",[10,310,311],{},"polygon",[246,313,314,317],{},[261,315,316],{},"a star or a flower",[261,318,319,181,325],{},[267,320,322],{"href":321},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fstar",[10,323,324],{},"star",[267,326,328],{"href":327},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fflower",[10,329,330],{},"flower",[246,332,333,336],{},[261,334,335],{},"a donut",[261,337,338],{},[267,339,341],{"href":340},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fring",[10,342,343],{},"ring",[246,345,346,349],{},[261,347,348],{},"a pie slice or a gauge arc",[261,350,351,357,358],{},[267,352,354],{"href":353},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Farc",[10,355,356],{},"arc"," with ",[267,359,361],{"href":360},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Faperture-to-half-angle",[10,362,363],{},"APERTURE_TO_HALF_ANGLE",[246,365,366,369],{},[261,367,368],{},"a heart, a drop, a lens, a moon",[261,370,371,181,377,181,383,181,389],{},[267,372,374],{"href":373},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fheart",[10,375,376],{},"heart",[267,378,380],{"href":379},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fteardrop",[10,381,382],{},"teardrop",[267,384,386],{"href":385},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fvesica",[10,387,388],{},"vesica",[267,390,392],{"href":391},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcrescent",[10,393,394],{},"crescent",[246,396,397,400],{},[261,398,399],{},"a slanted or tapered box",[261,401,402,181,408],{},[267,403,405],{"href":404},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fparallelogram",[10,406,407],{},"parallelogram",[267,409,411],{"href":410},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Ftrapezoid",[10,412,413],{},"trapezoid",[246,415,416,419],{},[261,417,418],{},"a plus sign",[261,420,421],{},[267,422,424],{"href":423},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcross",[10,425,426],{},"cross",[246,428,429,432],{},[261,430,431],{},"rounded corners on a sharp shape",[261,433,434,436,437],{},[10,435,195],{}," toward ",[267,438,439],{"href":269},[10,440,272],{},[235,442,444],{"id":443},"example","Example",[206,446,448],{"className":208,"code":447,"language":210,"meta":211,"style":211},"import {defineShader, shape, math} from 'shaders\u002Fstd'\n\nconst {polygon, circle} = shape\n\n\u002F\u002F A regular polygon whose corners round off toward a circle.\nexport const Hexagon = defineShader({\n  role: 'shape',\n  name: 'Hexagon',\n  description: 'Regular polygon with adjustable sides and corner rounding',\n  shape: {\n    distance: ({x, y}, u) =>\n      math.mix(polygon(x, y, u('radius'), u('sides')), circle(x, y, u('radius')), u('rounding')),\n    colorDescription: 'Fill color of the polygon',\n    centerDescription: 'Center position of the polygon',\n    bounds: {size: {width: 'radius', height: 'radius'}},\n    shapeProps: {\n      radius: {\n        default: 0.4,\n        description: 'Distance from the center to the middle of each side',\n        ui: {type: 'range', min: 0, max: 1, step: 0.01, label: 'Radius', group: 'Shape'},\n      },\n      sides: {\n        default: 6,\n        description: 'Number of sides (3 = triangle, 4 = square, 6 = hexagon)',\n        ui: {type: 'range', min: 3, max: 12, step: 1, label: 'Sides', group: 'Shape'},\n      },\n      rounding: {\n        default: 0,\n        description: 'Corner rounding: 0 is sharp, 1 becomes a circle',\n        ui: {type: 'range', min: 0, max: 1, step: 0.01, label: 'Rounding', group: 'Shape'},\n      },\n    },\n  },\n})\n",[10,449,450,461,468,493,498,505,527,539,550,561,567,597,655,666,677,693,699,705,716,727,769,775,781,791,801,833,838,844,853,863,893,898,904,910],{"__ignoreMap":211},[215,451,452,454,457,459],{"class":217,"line":218},[215,453,222],{"class":221},[215,455,456],{"class":225}," {defineShader, shape, math} ",[215,458,229],{"class":221},[215,460,233],{"class":232},[215,462,464],{"class":217,"line":463},2,[215,465,467],{"emptyLinePlaceholder":466},true,"\n",[215,469,471,474,477,480,482,484,487,490],{"class":217,"line":470},3,[215,472,473],{"class":221},"const",[215,475,476],{"class":225}," {",[215,478,311],{"class":479},"sDLfK",[215,481,181],{"class":225},[215,483,272],{"class":479},[215,485,486],{"class":225},"} ",[215,488,489],{"class":221},"=",[215,491,492],{"class":225}," shape\n",[215,494,496],{"class":217,"line":495},4,[215,497,467],{"emptyLinePlaceholder":466},[215,499,501],{"class":217,"line":500},5,[215,502,504],{"class":503},"sAwPA","\u002F\u002F A regular polygon whose corners round off toward a circle.\n",[215,506,508,511,514,517,520,524],{"class":217,"line":507},6,[215,509,510],{"class":221},"export",[215,512,513],{"class":221}," const",[215,515,516],{"class":479}," Hexagon",[215,518,519],{"class":221}," =",[215,521,523],{"class":522},"svObZ"," defineShader",[215,525,526],{"class":225},"({\n",[215,528,530,533,536],{"class":217,"line":529},7,[215,531,532],{"class":225},"  role: ",[215,534,535],{"class":232},"'shape'",[215,537,538],{"class":225},",\n",[215,540,542,545,548],{"class":217,"line":541},8,[215,543,544],{"class":225},"  name: ",[215,546,547],{"class":232},"'Hexagon'",[215,549,538],{"class":225},[215,551,553,556,559],{"class":217,"line":552},9,[215,554,555],{"class":225},"  description: ",[215,557,558],{"class":232},"'Regular polygon with adjustable sides and corner rounding'",[215,560,538],{"class":225},[215,562,564],{"class":217,"line":563},10,[215,565,566],{"class":225},"  shape: {\n",[215,568,570,573,576,580,582,585,588,591,594],{"class":217,"line":569},11,[215,571,572],{"class":522},"    distance",[215,574,575],{"class":225},": ({",[215,577,579],{"class":578},"s9osk","x",[215,581,181],{"class":225},[215,583,584],{"class":578},"y",[215,586,587],{"class":225},"}, ",[215,589,590],{"class":578},"u",[215,592,593],{"class":225},") ",[215,595,596],{"class":221},"=>\n",[215,598,600,603,605,608,610,613,615,617,620,623,625,627,630,633,635,637,639,641,643,645,647,649,652],{"class":217,"line":599},12,[215,601,602],{"class":225},"      math.",[215,604,195],{"class":522},[215,606,607],{"class":225},"(",[215,609,311],{"class":522},[215,611,612],{"class":225},"(x, y, ",[215,614,590],{"class":522},[215,616,607],{"class":225},[215,618,619],{"class":232},"'radius'",[215,621,622],{"class":225},"), ",[215,624,590],{"class":522},[215,626,607],{"class":225},[215,628,629],{"class":232},"'sides'",[215,631,632],{"class":225},")), ",[215,634,272],{"class":522},[215,636,612],{"class":225},[215,638,590],{"class":522},[215,640,607],{"class":225},[215,642,619],{"class":232},[215,644,632],{"class":225},[215,646,590],{"class":522},[215,648,607],{"class":225},[215,650,651],{"class":232},"'rounding'",[215,653,654],{"class":225},")),\n",[215,656,658,661,664],{"class":217,"line":657},13,[215,659,660],{"class":225},"    colorDescription: ",[215,662,663],{"class":232},"'Fill color of the polygon'",[215,665,538],{"class":225},[215,667,669,672,675],{"class":217,"line":668},14,[215,670,671],{"class":225},"    centerDescription: ",[215,673,674],{"class":232},"'Center position of the polygon'",[215,676,538],{"class":225},[215,678,680,683,685,688,690],{"class":217,"line":679},15,[215,681,682],{"class":225},"    bounds: {size: {width: ",[215,684,619],{"class":232},[215,686,687],{"class":225},", height: ",[215,689,619],{"class":232},[215,691,692],{"class":225},"}},\n",[215,694,696],{"class":217,"line":695},16,[215,697,698],{"class":225},"    shapeProps: {\n",[215,700,702],{"class":217,"line":701},17,[215,703,704],{"class":225},"      radius: {\n",[215,706,708,711,714],{"class":217,"line":707},18,[215,709,710],{"class":225},"        default: ",[215,712,713],{"class":479},"0.4",[215,715,538],{"class":225},[215,717,719,722,725],{"class":217,"line":718},19,[215,720,721],{"class":225},"        description: ",[215,723,724],{"class":232},"'Distance from the center to the middle of each side'",[215,726,538],{"class":225},[215,728,730,733,736,739,742,745,748,751,754,757,760,763,766],{"class":217,"line":729},20,[215,731,732],{"class":225},"        ui: {type: ",[215,734,735],{"class":232},"'range'",[215,737,738],{"class":225},", min: ",[215,740,741],{"class":479},"0",[215,743,744],{"class":225},", max: ",[215,746,747],{"class":479},"1",[215,749,750],{"class":225},", step: ",[215,752,753],{"class":479},"0.01",[215,755,756],{"class":225},", label: ",[215,758,759],{"class":232},"'Radius'",[215,761,762],{"class":225},", group: ",[215,764,765],{"class":232},"'Shape'",[215,767,768],{"class":225},"},\n",[215,770,772],{"class":217,"line":771},21,[215,773,774],{"class":225},"      },\n",[215,776,778],{"class":217,"line":777},22,[215,779,780],{"class":225},"      sides: {\n",[215,782,784,786,789],{"class":217,"line":783},23,[215,785,710],{"class":225},[215,787,788],{"class":479},"6",[215,790,538],{"class":225},[215,792,794,796,799],{"class":217,"line":793},24,[215,795,721],{"class":225},[215,797,798],{"class":232},"'Number of sides (3 = triangle, 4 = square, 6 = hexagon)'",[215,800,538],{"class":225},[215,802,804,806,808,810,813,815,818,820,822,824,827,829,831],{"class":217,"line":803},25,[215,805,732],{"class":225},[215,807,735],{"class":232},[215,809,738],{"class":225},[215,811,812],{"class":479},"3",[215,814,744],{"class":225},[215,816,817],{"class":479},"12",[215,819,750],{"class":225},[215,821,747],{"class":479},[215,823,756],{"class":225},[215,825,826],{"class":232},"'Sides'",[215,828,762],{"class":225},[215,830,765],{"class":232},[215,832,768],{"class":225},[215,834,836],{"class":217,"line":835},26,[215,837,774],{"class":225},[215,839,841],{"class":217,"line":840},27,[215,842,843],{"class":225},"      rounding: {\n",[215,845,847,849,851],{"class":217,"line":846},28,[215,848,710],{"class":225},[215,850,741],{"class":479},[215,852,538],{"class":225},[215,854,856,858,861],{"class":217,"line":855},29,[215,857,721],{"class":225},[215,859,860],{"class":232},"'Corner rounding: 0 is sharp, 1 becomes a circle'",[215,862,538],{"class":225},[215,864,866,868,870,872,874,876,878,880,882,884,887,889,891],{"class":217,"line":865},30,[215,867,732],{"class":225},[215,869,735],{"class":232},[215,871,738],{"class":225},[215,873,741],{"class":479},[215,875,744],{"class":225},[215,877,747],{"class":479},[215,879,750],{"class":225},[215,881,753],{"class":479},[215,883,756],{"class":225},[215,885,886],{"class":232},"'Rounding'",[215,888,762],{"class":225},[215,890,765],{"class":232},[215,892,768],{"class":225},[215,894,896],{"class":217,"line":895},31,[215,897,774],{"class":225},[215,899,901],{"class":217,"line":900},32,[215,902,903],{"class":225},"    },\n",[215,905,907],{"class":217,"line":906},33,[215,908,909],{"class":225},"  },\n",[215,911,913],{"class":217,"line":912},34,[215,914,915],{"class":225},"})\n",[235,917,919],{"id":918},"words","Words",[921,922,924],"primitive-words",{":words":923},"[{\"name\":\"circle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcircle\",\"summary\":\"A circle of a given radius.\"},{\"name\":\"ellipse\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fellipse\",\"summary\":\"An ellipse with separate horizontal and vertical radii.\"},{\"name\":\"roundedRect\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Froundedrect\",\"summary\":\"A rectangle with rounded corners.\"},{\"name\":\"polygon\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fpolygon\",\"summary\":\"A regular polygon with any number of sides.\"},{\"name\":\"star\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fstar\",\"summary\":\"A star with straight sides and sharp points.\"},{\"name\":\"flower\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fflower\",\"summary\":\"A flower with pointed petals and V-shaped valleys between them.\"},{\"name\":\"heart\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fheart\",\"summary\":\"A heart, point down at rotation 0.\"},{\"name\":\"ring\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fring\",\"summary\":\"A ring: a circular band around a centre.\"},{\"name\":\"arc\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Farc\",\"summary\":\"A pie wedge: a filled sector of a circle.\"},{\"name\":\"APERTURE_TO_HALF_ANGLE\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Faperture-to-half-angle\",\"summary\":\"The factor that turns an opening angle in degrees into the half-angle `arc` takes.\"},{\"name\":\"vesica\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fvesica\",\"summary\":\"A vesica: the lens where two equal circles overlap.\"},{\"name\":\"crescent\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcrescent\",\"summary\":\"A crescent: a disc with a smaller disc bitten out of it.\"},{\"name\":\"teardrop\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fteardrop\",\"summary\":\"A teardrop: a round bulb tapering to a sharp point, point up at rotation 0.\"},{\"name\":\"cross\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcross\",\"summary\":\"A plus-shaped cross with four equal arms.\"},{\"name\":\"trapezoid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Ftrapezoid\",\"summary\":\"A trapezoid: a four-sided shape with a flat top and bottom of different widths.\"},{\"name\":\"parallelogram\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fparallelogram\",\"summary\":\"A parallelogram: a rectangle with its top edge slid sideways.\"}]",[925,926,927,935,942,949,956,963,970,977,984,991,1001,1008,1015,1022,1029,1036],"ul",{},[928,929,930,934],"li",{},[267,931,932],{"href":269},[10,933,272],{}," — A circle of a given radius.",[928,936,937,941],{},[267,938,939],{"href":282},[10,940,285],{}," — An ellipse with separate horizontal and vertical radii.",[928,943,944,948],{},[267,945,946],{"href":295},[10,947,298],{}," — A rectangle with rounded corners.",[928,950,951,955],{},[267,952,953],{"href":308},[10,954,311],{}," — A regular polygon with any number of sides.",[928,957,958,962],{},[267,959,960],{"href":321},[10,961,324],{}," — A star with straight sides and sharp points.",[928,964,965,969],{},[267,966,967],{"href":327},[10,968,330],{}," — A flower with pointed petals and V-shaped valleys between them.",[928,971,972,976],{},[267,973,974],{"href":373},[10,975,376],{}," — A heart, point down at rotation 0.",[928,978,979,983],{},[267,980,981],{"href":340},[10,982,343],{}," — A ring: a circular band around a centre.",[928,985,986,990],{},[267,987,988],{"href":353},[10,989,356],{}," — A pie wedge: a filled sector of a circle.",[928,992,993,997,998,1000],{},[267,994,995],{"href":360},[10,996,363],{}," — The factor that turns an opening angle in degrees into the half-angle ",[10,999,356],{}," takes.",[928,1002,1003,1007],{},[267,1004,1005],{"href":385},[10,1006,388],{}," — A vesica: the lens where two equal circles overlap.",[928,1009,1010,1014],{},[267,1011,1012],{"href":391},[10,1013,394],{}," — A crescent: a disc with a smaller disc bitten out of it.",[928,1016,1017,1021],{},[267,1018,1019],{"href":379},[10,1020,382],{}," — A teardrop: a round bulb tapering to a sharp point, point up at rotation 0.",[928,1023,1024,1028],{},[267,1025,1026],{"href":423},[10,1027,426],{}," — A plus-shaped cross with four equal arms.",[928,1030,1031,1035],{},[267,1032,1033],{"href":410},[10,1034,413],{}," — A trapezoid: a four-sided shape with a flat top and bottom of different widths.",[928,1037,1038,1042],{},[267,1039,1040],{"href":404},[10,1041,407],{}," — A parallelogram: a rectangle with its top edge slid sideways.",[1044,1045,1046],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":211,"searchDepth":463,"depth":463,"links":1048},[1049,1050,1051],{"id":237,"depth":463,"text":238},{"id":443,"depth":463,"text":444},{"id":918,"depth":463,"text":919},"shape",null,"The 2D shapes: a circle, a star, a heart and a dozen more, each as a function of a point that tells you how far that point is from the shape's edge.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fshape.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fshape",{"title":131,"description":1054},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fshape.ts","docs\u002Fprimitives\u002F18.shape\u002Findex","u4E-XENOoaLGwT4-Q2jpP72SrgOhtIGuJmhE2SXaQ6U"]