2:I[9275,[],""] 3:I[1343,[],""] 4:I[2650,["173","static/chunks/173-424fa9be91923976.js","231","static/chunks/231-1e7bbdc770c66fc3.js","521","static/chunks/521-7266f541e89dccd7.js","185","static/chunks/app/layout-1a67d20efb7fbcee.js"],"Providers"] 5:I[7848,["173","static/chunks/173-424fa9be91923976.js","231","static/chunks/231-1e7bbdc770c66fc3.js","521","static/chunks/521-7266f541e89dccd7.js","185","static/chunks/app/layout-1a67d20efb7fbcee.js"],"Header"] 6:I[231,["173","static/chunks/173-424fa9be91923976.js","49","static/chunks/49-d41f7eeba1de0524.js","231","static/chunks/231-1e7bbdc770c66fc3.js","847","static/chunks/847-d03f1a8cba4db626.js","404","static/chunks/app/blog/page-527c30508ff17cd7.js"],""] 0:["zCwPuQV_WbLEohhlcHJz-",[[["",{"children":["blog",{"children":["use-svg-maker-or-creating-svgs-with-react",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":["use-svg-maker-or-creating-svgs-with-react",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"className":"sm:px-8 mt-16 lg:mt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"xl:relative","children":["$","div",null,{"className":"mx-auto max-w-2xl","children":["$","article",null,{"children":[["$","header",null,{"className":"flex flex-col","children":[["$","h1",null,{"className":"mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100","children":"use-svg-maker or creating SVGs with React, A Tutorial"}],["$","time",null,{"dateTime":"2022-11-21T20:00:00.000Z","className":"order-first flex items-center text-base text-zinc-400 dark:text-zinc-500","children":[["$","span",null,{"className":"h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"}],["$","span",null,{"className":"ml-3","children":"21 November 2022"}]]}]]}],["$","div",null,{"className":"mt-8 prose dark:prose-invert","data-mdx-content":true,"children":[["$","p",null,{"children":["SVGs are XML descriptions of vector graphics. React is a highly efficient, supported way to create XML-ish stuff. Indeed while dynamic, it is often used for purely static content too. So, what if instead of clicking your mouse a lot in Figma, you used React code to create SVGs? That is what ",["$","a",null,{"href":"https://github.com/jamesporter/use-svg","children":"use-svg-maker"}]," is for. It takes care of the tedious parts (which actually aren't that many) to allow you to rapidly create and save SVGs. We will create something like"]}],"\n",["$","svg",null,{"class":" bg-white","width":"960","height":"540","viewBox":"0 0 960 540","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"x":"0","y":"0","width":"960","height":"540","fill":"#141f2e"}],["$","circle",null,{"r":"54","cx":"739.3184861636516","cy":"270","fill":"hsla(330, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"637.2372961057691","cy":"300.079976055433","fill":"hsla(331, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"631.5897264611658","cy":"329.6855729195652","fill":"hsla(332, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"722.464842776832","cy":"358.3498926443227","fill":"hsla(333, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"670.9951170468756","cy":"385.62088178441167","fill":"hsla(334, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"654.8455924863358","cy":"411.06846055019355","fill":"hsla(335, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"593.4007245350849","cy":"434.2913054228853","fill":"hsla(336, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"552.1115253299799","cy":"454.92317826618944","fill":"hsla(337, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"547.0466847489054","cy":"472.63870212048363","fill":"hsla(338, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"539.9537700932152","cy":"487.1584925918447","fill":"hsla(339, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"615.7158246960412","cy":"498.2535639108369","fill":"hsla(340, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"605.8417477102795","cy":"505.74894017488526","fill":"hsla(341, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"452.83646480463307","cy":"509.52641482278517","fill":"hsla(342, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"526.4820213590187","cy":"509.52641482278517","fill":"hsla(343, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"496.58023054548","cy":"505.7489401748853","fill":"hsla(344, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"425.1544075136644","cy":"498.2535639108369","fill":"hsla(345, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"458.6832022340881","cy":"487.15849259184466","fill":"hsla(346, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"332.08308304138905","cy":"472.6387021204836","fill":"hsla(347, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"284.7849825779123","cy":"454.92317826618944","fill":"hsla(348, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"285.72904325520955","cy":"434.29130542288533","fill":"hsla(349, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"224.28417530395876","cy":"411.06846055019355","fill":"hsla(350, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"227.45313690707053","cy":"385.62088178441167","fill":"hsla(351, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"237.53515722316797","cy":"358.3498926443227","fill":"hsla(352, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"266.85852749278024","cy":"329.6855729195653","fill":"hsla(353, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"180.34072563847144","cy":"300.07997605543306","fill":"hsla(354, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"178.4482539539461","cy":"270.00000000000006","fill":"hsla(355, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"284.12573156692747","cy":"239.92002394456696","fill":"hsla(356, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"185.98829528307462","cy":"210.3144270804349","fill":"hsla(357, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"299.0869032692218","cy":"181.6501073556773","fill":"hsla(358, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"269.6863967894727","cy":"154.3791182155883","fill":"hsla(359, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"224.28417530395865","cy":"128.93153944980656","fill":"hsla(360, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"347.2807893012634","cy":"105.70869457711478","fill":"hsla(361, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"284.78498257791233","cy":"85.07682173381056","fill":"hsla(362, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"351.4015692050409","cy":"67.36129787951631","fill":"hsla(363, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"358.494483860731","cy":"52.84150740815525","fill":"hsla(364, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"448.0691812324148","cy":"41.746436089163154","fill":"hsla(365, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"454.3469706630778","cy":"34.25105982511471","fill":"hsla(366, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"507.16353519536705","cy":"30.47358517721483","fill":"hsla(367, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"514.3882108506867","cy":"30.47358517721483","fill":"hsla(368, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"505.6530293369221","cy":"34.25105982511471","fill":"hsla(369, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"596.3973385323895","cy":"41.746436089163126","fill":"hsla(370, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"520.6352839295632","cy":"52.84150740815522","fill":"hsla(371, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"589.2799446313076","cy":"67.3612978795164","fill":"hsla(372, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"675.2150174220876","cy":"85.0768217338105","fill":"hsla(373, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"735.8227027908442","cy":"105.70869457711464","fill":"hsla(374, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"631.9308187675852","cy":"128.9315394498064","fill":"hsla(375, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"751.8653492565811","cy":"154.37911821558814","fill":"hsla(376, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"622.2761244034748","cy":"181.6501073556773","fill":"hsla(377, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"793.330190880577","cy":"210.3144270804347","fill":"hsla(378, 90%, 70%, 0.4)"}],["$","circle",null,{"r":"54","cx":"798.9777605251802","cy":"239.92002394456688","fill":"hsla(379, 90%, 70%, 0.4)"}]]}],"\n",["$","p",null,{"children":"Let's create a basic setup in Code Sandbox:"}],"\n",["$","iframe",null,{"src":"https://codesandbox.io/embed/use-svg-maker-part-1-wi0284?fontsize=14&hidenavigation=1&theme=dark&view=preview","style":{"width":"100%","height":500,"border":0,"borderRadius":4,"overflow":"hidden"},"title":"use-svg-maker Part 1","allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking","sandbox":"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}],"\n",["$","p",null,{"children":["We've added the library, Tailwind for CSS and a helper for parameterising the SVGs. Now we'd better draw something. If you open the sandbox above you can code along easily with this tutorial. Open ",["$","code",null,{"children":"App.tsx"}]," and look for"]}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"svg"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}]," bg-white",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token spread","children":[["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token spread operator","children":"..."}],"props",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"ref"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"ref",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}]}],"\n",["$","p",null,{"children":["This is just SVG. We also have access to some ",["$","code",null,{"children":"meta"}]," data from the hook. And we've very easily created a button to save the SVG. But we'd better draw somthing. Let's start with a circle in the middle."]}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"svg"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}]," bg-white",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token spread","children":[["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token spread operator","children":"..."}],"props",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"ref"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"ref",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"circle"]}]," ",["$","span",null,{"className":"token attr-name","children":"cx"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"x"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"cy"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"y"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"r"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"100"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}]}],"\n",["$","p",null,{"children":["This is a circle in SVG. It has all sorts of concise props for declaring shapes. By default the ",["$","code",null,{"children":"fill"}]," is black."]}],"\n",["$","p",null,{"children":["Okay that is boring and harder than Figma. Let's draw 50 circles, with fancy opacity variation. That would not be easy in Figma. And let's add a background too via a ",["$","code",null,{"children":"rect"}],"."]}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"svg"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}]," bg-white",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token spread","children":[["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token spread operator","children":"..."}],"props",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"ref"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"ref",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"rect"]}],"\n ",["$","span",null,{"className":"token attr-name","children":"x"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"y"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"width"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"height"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"bottom"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"fill"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token function","children":"hsla"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"210"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"90"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"20"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n\n "}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token spread operator","children":"..."}],["$","span",null,{"className":"token known-class-name class-name","children":"Array"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"50"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"keys"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"map"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],"i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"circle"]}],"\n ",["$","span",null,{"className":"token attr-name","children":"key"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"i",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"r"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"bottom"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cx"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"x"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"cos"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cy"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"y"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"sin"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"fill"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token function","children":"hsla"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"130"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," i",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"90"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"70"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.4"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}]}],"\n",["$","iframe",null,{"src":"https://codesandbox.io/embed/use-svg-maker-part-2-xuc2wz?fontsize=14&hidenavigation=1&theme=dark","style":{"width":"100%","height":500,"border":0,"borderRadius":4,"overflow":"hidden"},"title":"use-svg-maker Part 2","allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking","sandbox":"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}],"\n",["$","p",null,{"children":["Let's make it interactive. We will use ",["$","code",null,{"children":"leva"}],", it has a wonderfully quick and concise (and typesafe) API for letting the user pick values: ",["$","code",null,{"children":"useControls"}],". In just a few lines of code we can set up a way to explore parameters:"]}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," mainHue",["$","span",null,{"className":"token punctuation","children":","}]," background ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useControls"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n mainHue",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n value",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"130"}],["$","span",null,{"className":"token punctuation","children":","}],"\n min",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}],"\n max",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"360"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n background",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"#3366aa\""}],["$","span",null,{"className":"token punctuation","children":","}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","iframe",null,{"src":"https://codesandbox.io/embed/use-svg-maker-part-3-luv1h6?fontsize=14&hidenavigation=1&theme=dark","style":{"width":"100%","height":500,"border":0,"borderRadius":4,"overflow":"hidden"},"title":"use-svg-maker Part 3","allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking","sandbox":"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}],"\n",["$","p",null,{"children":["Let's go a bit further. Playing around with the ",["$","code",null,{"children":"leva"}]," controls we might decide that ",["$","code",null,{"children":"330"}]," is a good base hue and that ",["$","code",null,{"children":"#141f2e"}]," works for the background."]}],"\n",["$","p",null,{"children":["Let's do something more interesting based on that. ",["$","code",null,{"children":"use-svg-maker"}]," comes with helpers for noise and pseudo-randomness. Let's add some noise to the circles' positions. Add a new controlled parameter:"]}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," mainHue",["$","span",null,{"className":"token punctuation","children":","}]," background",["$","span",null,{"className":"token punctuation","children":","}]," randomness ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useControls"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n mainHue",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n value",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"330"}],["$","span",null,{"className":"token punctuation","children":","}],"\n min",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}],"\n max",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"360"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n background",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"#141f2e\""}],["$","span",null,{"className":"token punctuation","children":","}],"\n randomness",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n value",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.3"}],["$","span",null,{"className":"token punctuation","children":","}],"\n min",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}],"\n max",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"1"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","p",null,{"children":"And wire up like:"}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token punctuation","children":";"}],["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token spread operator","children":"..."}],["$","span",null,{"className":"token known-class-name class-name","children":"Array"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"50"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"keys"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"map"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],"i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"circle"]}],"\n ",["$","span",null,{"className":"token attr-name","children":"key"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"i",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"r"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"bottom"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cx"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"x"}]," ",["$","span",null,{"className":"token operator","children":"+"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"cos"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"+"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," randomness ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token function","children":"perlin2"}],["$","span",null,{"className":"token punctuation","children":"("}],"i",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.23424"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cy"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"y"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"sin"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"fill"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token function","children":"hsla"}],["$","span",null,{"className":"token punctuation","children":"("}],"mainHue ",["$","span",null,{"className":"token operator","children":"+"}]," i",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"90"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"70"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.4"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","iframe",null,{"src":"https://codesandbox.io/embed/use-svg-maker-part-4-esrtky?fontsize=14&hidenavigation=1&theme=dark","style":{"width":"100%","height":500,"border":0,"borderRadius":4,"overflow":"hidden"},"title":"use-svg-maker Part 4","allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking","sandbox":"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}],"\n",["$","h2",null,{"children":"Abstraction"}],"\n",["$","p",null,{"children":"A lot of the code we looked at was pretty repetitive and verbose. But remember, we are using React. When we have figured out something we want to work with, it is as easy as it would be for a web app to make a component or hook with the logic. For example here is a small but non trivial component from our work:"}],"\n",["$","pre",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx","children":[["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":["$","span",null,{"className":"token maybe-class-name","children":"Circle"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n i",["$","span",null,{"className":"token punctuation","children":","}],"\n meta",["$","span",null,{"className":"token punctuation","children":","}],"\n randomness",["$","span",null,{"className":"token punctuation","children":","}],"\n mainHue",["$","span",null,{"className":"token punctuation","children":","}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n i",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token builtin","children":"number"}],"\n randomness",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token builtin","children":"number"}],"\n mainHue",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token builtin","children":"number"}],"\n meta",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"ReturnType"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token keyword","children":"typeof"}]," useSVG",["$","span",null,{"className":"token operator","children":">"}],["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token string","children":"\"meta\""}],["$","span",null,{"className":"token punctuation","children":"]"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"circle"]}],"\n ",["$","span",null,{"className":"token attr-name","children":"key"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"i",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"r"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"bottom"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cx"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"x"}]," ",["$","span",null,{"className":"token operator","children":"+"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"cos"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"+"}],"\n meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," randomness ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token function","children":"perlin2"}],["$","span",null,{"className":"token punctuation","children":"("}],"i",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.23424"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"cy"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"y"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," meta",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"right"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.25"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"sin"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token constant","children":"PI"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"25"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token attr-name","children":"fill"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token function","children":"hsla"}],["$","span",null,{"className":"token punctuation","children":"("}],"mainHue ",["$","span",null,{"className":"token operator","children":"+"}]," i",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"90"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"70"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.4"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":["With React components we can encapsulate and reuse code. With just a tiny amount more work we can create this configurable scene, with a reusable component. We pull in ",["$","code",null,{"children":"use-svg-maker"}],"'s built in pseudo random number generator for another effect. This also includes a parameterised blur filter, one of SVG's more advanced effects."]}],"\n",["$","iframe",null,{"src":"https://codesandbox.io/embed/use-svg-maker-part-5-bvom1h?fontsize=14&hidenavigation=1&theme=dark","style":{"width":"100%","height":500,"border":0,"borderRadius":4,"overflow":"hidden"},"title":"use-svg-maker Part 5","allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking","sandbox":"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}]]}]]}]}]}]}]}]}]}]],null],null]},["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","use-svg-maker-or-creating-svgs-with-react","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"h-full antialiased","suppressHydrationWarning":true,"children":["$","body",null,{"className":"flex h-full bg-zinc-200 dark:bg-black","children":["$","$L4",null,{"children":["$","div",null,{"className":"flex w-full","children":[["$","div",null,{"className":"fixed inset-0 flex justify-center sm:px-8","children":["$","div",null,{"className":"flex w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"}]}]}],["$","div",null,{"className":"relative flex w-full flex-col","children":[["$","$L5",null,{}],["$","main",null,{"className":"flex-auto","children":["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"sm:px-8 flex h-full items-center pt-16 sm:pt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center","children":[["$","p",null,{"className":"text-base font-semibold text-zinc-400 dark:text-zinc-500","children":"404"}],["$","h1",null,{"className":"mt-4 text-4xl font-bold tracking-tight text-rose-800 sm:text-5xl dark:text-rose-100","children":"Page not found"}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":"Sorry, we couldn’t find the page you’re looking for."}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":["You may want to try"," ",["$","a",null,{"href":"https://archive.amimetic.co.uk","className":"font-semibold text-rose-600 hover:text-rose-500","children":"the old version of this website"}]," ","as not everything was included here."]}],["$","$L6",null,{"className":"inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 mt-4","href":"/","children":"Go back home"}]]}]}]}]}]}],"notFoundStyles":[],"styles":null}]}],["$","footer",null,{"className":"mt-32 flex-none","children":["$","div",null,{"className":"sm:px-8","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center justify-between gap-6 sm:flex-row","children":[["$","div",null,{"className":"flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200","children":[["$","$L6",null,{"href":"/about","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"About"}],["$","$L6",null,{"href":"/blog","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Writing"}],["$","$L6",null,{"href":"/projects","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Projects"}]]}],["$","p",null,{"className":"text-sm text-zinc-400 dark:text-zinc-500","children":["© ",2024," James Porter"]}]]}]}]}]}]}]}]}]]}]]}]}]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3dda7107ffc2265a.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"use-svg-maker or creating SVGs with React, A Tutorial - James Porter"}],["$","meta","3",{"name":"description","content":"Projects and thoughts from James Porter"}]] 1:null