var Component=(()=>{var Ba=Object.create;var ce=Object.defineProperty;var Da=Object.getOwnPropertyDescriptor;var Fa=Object.getOwnPropertyNames;var Aa=Object.getPrototypeOf,Wa=Object.prototype.hasOwnProperty;var sr=(t,e)=>()=>(t&&(e=t(t=0)),e);var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),br=(t,e)=>{for(var r in e)ce(t,r,{get:e[r],enumerable:!0})},fr=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Fa(e))!Wa.call(t,i)&&i!==r&&ce(t,i,{get:()=>e[i],enumerable:!(l=Da(e,i))||l.enumerable});return t};var gn=(t,e,r)=>(r=t!=null?Ba(Aa(t)):{},fr(e||!t||!t.__esModule?ce(r,"default",{value:t,enumerable:!0}):r,t)),pr=t=>fr(ce({},"__esModule",{value:!0}),t);var _=u((fm,_r)=>{_r.exports=React});var Nr=u(xn=>{"use strict";(function(){"use strict";var t=_(),e=Symbol.for("react.element"),r=Symbol.for("react.portal"),l=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),c=Symbol.for("react.profiler"),o=Symbol.for("react.provider"),s=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),M=Symbol.for("react.offscreen"),B=Symbol.iterator,Z="@@iterator";function K(a){if(a===null||typeof a!="object")return null;var d=B&&a[B]||a[Z];return typeof d=="function"?d:null}var j=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function E(a){{for(var d=arguments.length,m=new Array(d>1?d-1:0),f=1;f=1&&P>=0&&h[O]!==T[P];)P--;for(;O>=1&&P>=0;O--,P--)if(h[O]!==T[P]){if(O!==1||P!==1)do if(O--,P--,P<0||h[O]!==T[P]){var C=` `+h[O].replace(" at new "," at ");return a.displayName&&C.includes("")&&(C=C.replace("",a.displayName)),typeof a=="function"&&re.set(a,C),C}while(O>=1&&P>=0);break}}}finally{bn=!1,mn.current=k,pa(),Error.prepareStackTrace=v}var $=a?a.displayName||a.name:"",mr=$?te($):"";return typeof a=="function"&&re.set(a,mr),mr}function Na(a,d,m){return Qt(a,!1)}function ha(a){var d=a.prototype;return!!(d&&d.isReactComponent)}function le(a,d,m){if(a==null)return"";if(typeof a=="function")return Qt(a,ha(a));if(typeof a=="string")return te(a);switch(a){case p:return te("Suspense");case x:return te("SuspenseList")}if(typeof a=="object")switch(a.$$typeof){case b:return Na(a.render);case w:return le(a.type,d,m);case S:{var f=a,v=f._payload,k=f._init;try{return le(k(v),d,m)}catch{}}}return""}var ae=Object.prototype.hasOwnProperty,er={},nr=j.ReactDebugCurrentFrame;function ie(a){if(a){var d=a._owner,m=le(a.type,a._source,d?d.type:null);nr.setExtraStackFrame(m)}else nr.setExtraStackFrame(null)}function ga(a,d,m,f,v){{var k=Function.call.bind(ae);for(var y in a)if(k(a,y)){var h=void 0;try{if(typeof a[y]!="function"){var T=Error((f||"React class")+": "+m+" type `"+y+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof a[y]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw T.name="Invariant Violation",T}h=a[y](d,y,f,m,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(O){h=O}h&&!(h instanceof Error)&&(ie(v),E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",f||"React class",m,y,typeof h),ie(null)),h instanceof Error&&!(h.message in er)&&(er[h.message]=!0,ie(v),E("Failed %s type: %s",m,h.message),ie(null))}}}var xa=Array.isArray;function fn(a){return xa(a)}function ya(a){{var d=typeof Symbol=="function"&&Symbol.toStringTag,m=d&&a[Symbol.toStringTag]||a.constructor.name||"Object";return m}}function va(a){try{return tr(a),!1}catch{return!0}}function tr(a){return""+a}function rr(a){if(va(a))return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",ya(a)),tr(a)}var Q=j.ReactCurrentOwner,ka={key:!0,ref:!0,__self:!0,__source:!0},lr,ar,pn;pn={};function wa(a){if(ae.call(a,"ref")){var d=Object.getOwnPropertyDescriptor(a,"ref").get;if(d&&d.isReactWarning)return!1}return a.ref!==void 0}function Oa(a){if(ae.call(a,"key")){var d=Object.getOwnPropertyDescriptor(a,"key").get;if(d&&d.isReactWarning)return!1}return a.key!==void 0}function Pa(a,d){if(typeof a.ref=="string"&&Q.current&&d&&Q.current.stateNode!==d){var m=L(Q.current.type);pn[m]||(E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',L(Q.current.type),a.ref),pn[m]=!0)}}function qa(a,d){{var m=function(){lr||(lr=!0,E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",d))};m.isReactWarning=!0,Object.defineProperty(a,"key",{get:m,configurable:!0})}}function Ea(a,d){{var m=function(){ar||(ar=!0,E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",d))};m.isReactWarning=!0,Object.defineProperty(a,"ref",{get:m,configurable:!0})}}var Ta=function(a,d,m,f,v,k,y){var h={$$typeof:e,type:a,key:d,ref:m,props:y,_owner:k};return h._store={},Object.defineProperty(h._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(h,"_self",{configurable:!1,enumerable:!1,writable:!1,value:f}),Object.defineProperty(h,"_source",{configurable:!1,enumerable:!1,writable:!1,value:v}),Object.freeze&&(Object.freeze(h.props),Object.freeze(h)),h};function Sa(a,d,m,f,v){{var k,y={},h=null,T=null;m!==void 0&&(rr(m),h=""+m),Oa(d)&&(rr(d.key),h=""+d.key),wa(d)&&(T=d.ref,Pa(d,v));for(k in d)ae.call(d,k)&&!ka.hasOwnProperty(k)&&(y[k]=d[k]);if(a&&a.defaultProps){var O=a.defaultProps;for(k in O)y[k]===void 0&&(y[k]=O[k])}if(h||T){var P=typeof a=="function"?a.displayName||a.name||"Unknown":a;h&&qa(y,P),T&&Ea(y,P)}return Ta(a,h,T,v,f,Q.current,y)}}var _n=j.ReactCurrentOwner,ir=j.ReactDebugCurrentFrame;function W(a){if(a){var d=a._owner,m=le(a.type,a._source,d?d.type:null);ir.setExtraStackFrame(m)}else ir.setExtraStackFrame(null)}var Nn;Nn=!1;function hn(a){return typeof a=="object"&&a!==null&&a.$$typeof===e}function cr(){{if(_n.current){var a=L(_n.current.type);if(a)return` Check the render method of \``+a+"`."}return""}}function Ca(a){{if(a!==void 0){var d=a.fileName.replace(/^.*[\\\/]/,""),m=a.lineNumber;return` Check your code at `+d+":"+m+"."}return""}}var dr={};function Ma(a){{var d=cr();if(!d){var m=typeof a=="string"?a:a.displayName||a.name;m&&(d=` Check the top-level render call using <`+m+">.")}return d}}function or(a,d){{if(!a._store||a._store.validated||a.key!=null)return;a._store.validated=!0;var m=Ma(d);if(dr[m])return;dr[m]=!0;var f="";a&&a._owner&&a._owner!==_n.current&&(f=" It was passed a child from "+L(a._owner.type)+"."),W(a),E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',m,f),W(null)}}function ur(a,d){{if(typeof a!="object")return;if(fn(a))for(var m=0;m",h=" Did you accidentally export a JSX literal instead of a component?"):O=typeof a,E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",O,h)}var P=Sa(a,d,m,v,k);if(P==null)return P;if(y){var C=d.children;if(C!==void 0)if(f)if(fn(C)){for(var $=0;${"use strict";hr.exports=Nr()});var kr=u(de=>{function yn(t){"@babel/helpers - typeof";return yn=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},yn(t)}Object.defineProperty(de,"__esModule",{value:!0});de.GeneralObserver=void 0;var ee=$a(_());function vr(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(vr=function(i){return i?r:e})(t)}function $a(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||yn(t)!=="object"&&typeof t!="function")return{default:t};var r=vr(e);if(r&&r.has(t))return r.get(t);var l={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in t)if(c!=="default"&&Object.prototype.hasOwnProperty.call(t,c)){var o=i?Object.getOwnPropertyDescriptor(t,c):null;o&&(o.get||o.set)?Object.defineProperty(l,c,o):l[c]=t[c]}return l.default=t,r&&r.set(t,l),l}function xr(t,e){return Ua(t)||Va(t,e)||Ga(t,e)||za()}function za(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Ga(t,e){if(t){if(typeof t=="string")return yr(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return yr(t,e)}}function yr(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,l=new Array(e);r0&&(x(!0),l&&l())},{root:null,rootMargin:"400px",threshold:0});o&&o.current&&w.observe(o.current)},[o]),ee.default.createElement("div",{ref:o,"data-testid":"general-observer",className:"mdx-embed"},p?r:ee.default.createElement("div",{style:{height:c,width:"100%"}}))};de.GeneralObserver=Ha});var g=u(vn=>{Object.defineProperty(vn,"__esModule",{value:!0});Object.defineProperty(vn,"GeneralObserver",{enumerable:!0,get:function(){return Ya.GeneralObserver}});var Ya=kr()});var wr=u(oe=>{Object.defineProperty(oe,"__esModule",{value:!0});oe.AirtableBase=void 0;var kn=Za(_()),Xa=g();function Za(t){return t&&t.__esModule?t:{default:t}}var Ka=function(e){var r=e.airtableBaseId,l=e.layout,i=l===void 0?"":l,c=e.viewControls,o=c===void 0?"on":c;return kn.default.createElement(Xa.GeneralObserver,null,kn.default.createElement("div",{style:{position:"relative"}},kn.default.createElement("iframe",{"data-testid":"airtable-base",title:"airtable-".concat(r),src:"https://airtable.com/embed/".concat(r,"?backgroundColor=green&").concat(i?"layout=".concat(i,"&"):"","viewControls=").concat(o),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};oe.AirtableBase=Ka});var Or=u(ue=>{Object.defineProperty(ue,"__esModule",{value:!0});ue.AirtableForm=void 0;var wn=Qa(_()),Ja=g();function Qa(t){return t&&t.__esModule?t:{default:t}}var ei=function(e){var r=e.airtableFormId;return wn.default.createElement(Ja.GeneralObserver,null,wn.default.createElement("div",{style:{position:"relative"}},wn.default.createElement("iframe",{"data-testid":"airtable-form",title:"airtable-".concat(r),src:"https://airtable.com/embed/".concat(r,"?backgroundColor=green"),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};ue.AirtableForm=ei});var On=u(me=>{Object.defineProperty(me,"__esModule",{value:!0});Object.defineProperty(me,"AirtableBase",{enumerable:!0,get:function(){return ni.AirtableBase}});Object.defineProperty(me,"AirtableForm",{enumerable:!0,get:function(){return ti.AirtableForm}});var ni=wr(),ti=Or()});var Pr=u(se=>{Object.defineProperty(se,"__esModule",{value:!0});se.Buzzsprout=void 0;var Pn=li(_()),ri=g();function li(t){return t&&t.__esModule?t:{default:t}}var ai=function(e){var r=e.buzzsproutId,l=e.width,i=l===void 0?"100%":l,c=e.height,o=c===void 0?"200":c,s=/^\d{7}\/\d{7}-[\w|\W]+/;return s.test(r)?Pn.default.createElement(ri.GeneralObserver,null,Pn.default.createElement("div",{style:{position:"relative"}},Pn.default.createElement("iframe",{"data-testid":"buzzsprout",className:"buzzsprout-mdx-embed",title:"buzzsprout-".concat(r),src:"https://www.buzzsprout.com/".concat(r,"?client_source=admin&iframe=true"),width:i,height:o,frameBorder:"0",scrolling:"no"}))):null};se.Buzzsprout=ai});var En=u(qn=>{Object.defineProperty(qn,"__esModule",{value:!0});Object.defineProperty(qn,"Buzzsprout",{enumerable:!0,get:function(){return ii.Buzzsprout}});var ii=Pr()});var Er=u(be=>{Object.defineProperty(be,"__esModule",{value:!0});be.CodePen=void 0;var qr=di(_()),ci=g();function di(t){return t&&t.__esModule?t:{default:t}}var oi=function(e){var r=e.codePenId,l=e.height,i=l===void 0?500:l,c=e.tabs,o=c===void 0?"result":c,s=e.clickToLoad,b=s===void 0?!1:s,p=e.editable,x=p===void 0?!1:p,w=e.theme,S=w===void 0?"default":w;return qr.default.createElement(ci.GeneralObserver,{height:i},qr.default.createElement("iframe",{"data-testid":"codepen",title:"codepen-".concat(r),className:"codepen-mdx-embed",height:i,style:{width:"100%"},scrolling:"no",src:"https://codepen.io/team/codepen/embed".concat(b?"/preview":"","/").concat(r,"?height=265&theme-id=").concat(S,"&default-tab=").concat(o).concat(x?"&editable=true":""),frameBorder:"no",allowFullScreen:!0}))};be.CodePen=oi});var Sn=u(Tn=>{Object.defineProperty(Tn,"__esModule",{value:!0});Object.defineProperty(Tn,"CodePen",{enumerable:!0,get:function(){return ui.CodePen}});var ui=Er()});var Sr=u(fe=>{Object.defineProperty(fe,"__esModule",{value:!0});fe.CodeSandbox=void 0;var Tr=si(_()),mi=g();function si(t){return t&&t.__esModule?t:{default:t}}var bi=function(e){var r=e.codeSandboxId;return Tr.default.createElement(mi.GeneralObserver,null,Tr.default.createElement("iframe",{"data-testid":"codesandbox",title:"codeSandbox-".concat(r),className:"codesandbox-mdx-embed",src:"https://codesandbox.io/embed/".concat(r),allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb",sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin",style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:" hidden"}}))};fe.CodeSandbox=bi});var Mn=u(Cn=>{Object.defineProperty(Cn,"__esModule",{value:!0});Object.defineProperty(Cn,"CodeSandbox",{enumerable:!0,get:function(){return fi.CodeSandbox}});var fi=Sr()});var q=u(R=>{Object.defineProperty(R,"__esModule",{value:!0});R.isEmptyString=R.getPadding=R.createStyleSheet=R.createScriptTag=void 0;var pi=function(e){var r={"1:1":{paddingTop:"100%"},"16:9":{paddingTop:"56.25%"},"4:3":{paddingTop:"75%"},"3:2":{paddingTop:"66.66%"},"8.5":{paddingTop:"62.5%"}};return r[e]};R.getPadding=pi;var _i=function(e,r){var l=document.createElement("script");l.type="text/javascript",e&&(l.src=e),r&&(l.innerText=r),l.onerror=function(i){console.error("MDXEmbedProvider ".concat(i.type),i)},document.getElementsByTagName("head")[0].appendChild(l)};R.createScriptTag=_i;var Ni=function(e){var r=document.createElement("link");r.type="text/css",r.rel="stylesheet",r.href=e,document.getElementsByTagName("head")[0].appendChild(r)};R.createStyleSheet=Ni;var hi=function(e){return e==null||e.length===0};R.isEmptyString=hi});var Mr=u(pe=>{Object.defineProperty(pe,"__esModule",{value:!0});pe.EggheadLesson=void 0;var jn=yi(_()),gi=q(),xi=g();function yi(t){return t&&t.__esModule?t:{default:t}}function Cr(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function vi(t){for(var e=1;e{Object.defineProperty(Rn,"__esModule",{value:!0});Object.defineProperty(Rn,"EggheadLesson",{enumerable:!0,get:function(){return Oi.EggheadLesson}});var Oi=Mr()});var Lr=u(z=>{Object.defineProperty(z,"__esModule",{value:!0});z.handleFlickrLoad=z.flickrClassNames=void 0;var Pi=q(),jr=!1,Rr=[".flickr-embed"].join(",");z.flickrClassNames=Rr;var qi="https://embedr.flickr.com/assets/client-code.js",Ei=function(){return document.querySelector(Rr)!==null&&!jr?((0,Pi.createScriptTag)(qi,null),jr=!0,{status:"createScriptTag"}):{status:"null"}};z.handleFlickrLoad=Ei});var Ir=u(_e=>{Object.defineProperty(_e,"__esModule",{value:!0});_e.Flickr=void 0;var In=Ci(_()),Ti=g(),Si=Lr();function Ci(t){return t&&t.__esModule?t:{default:t}}var Mi=function(e){var r=e.flickrLink;return In.default.createElement(Ti.GeneralObserver,{onEnter:function(){return(0,Si.handleFlickrLoad)()}},In.default.createElement("span",{"data-testid":"flickr",className:"flickr-embed-mdx","data-flickr-embed":"true","data-header":"true","data-footer":"true"},In.default.createElement("img",{src:"https://live.staticflickr.com/".concat(r),width:"100%",height:"auto",alt:r})))};_e.Flickr=Mi});var Dn=u(Bn=>{Object.defineProperty(Bn,"__esModule",{value:!0});Object.defineProperty(Bn,"Flickr",{enumerable:!0,get:function(){return ji.Flickr}});var ji=Ir()});var Dr=u(Ne=>{Object.defineProperty(Ne,"__esModule",{value:!0});Ne.Figma=void 0;var Br=Li(_()),Ri=g();function Li(t){return t&&t.__esModule?t:{default:t}}var Ii=function(e){var r=e.title,l=e.height,i=l===void 0?450:l,c=e.url,o=/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;return o.test(c)?Br.default.createElement(Ri.GeneralObserver,{height:i},Br.default.createElement("iframe",{"data-testid":"figma",title:"figma-".concat(r),className:"figma-mdx-embed",height:i,style:{width:"100%"},scrolling:"no",src:"https://www.figma.com/embed?embed_host=mdx-embed&url=https://www.figma.com/".concat(c),frameBorder:"no",allowFullScreen:!0})):null};Ne.Figma=Ii});var An=u(Fn=>{Object.defineProperty(Fn,"__esModule",{value:!0});Object.defineProperty(Fn,"Figma",{enumerable:!0,get:function(){return Bi.Figma}});var Bi=Dr()});var $r=u(ge=>{function Wn(t){"@babel/helpers - typeof";return Wn=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Wn(t)}Object.defineProperty(ge,"__esModule",{value:!0});ge.Gist=void 0;var he=Fi(_()),Fr=q(),Di=g();function Wr(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(Wr=function(i){return i?r:e})(t)}function Fi(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Wn(t)!=="object"&&typeof t!="function")return{default:t};var r=Wr(e);if(r&&r.has(t))return r.get(t);var l={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in t)if(c!=="default"&&Object.prototype.hasOwnProperty.call(t,c)){var o=i?Object.getOwnPropertyDescriptor(t,c):null;o&&(o.get||o.set)?Object.defineProperty(l,c,o):l[c]=t[c]}return l.default=t,r&&r.set(t,l),l}function Ai(t,e){return Gi(t)||zi(t,e)||$i(t,e)||Wi()}function Wi(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function $i(t,e){if(t){if(typeof t=="string")return Ar(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Ar(t,e)}}function Ar(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,l=new Array(e);r{Object.defineProperty($n,"__esModule",{value:!0});Object.defineProperty($n,"Gist",{enumerable:!0,get:function(){return Ui.Gist}});var Ui=$r()});var zr=u(ye=>{Object.defineProperty(ye,"__esModule",{value:!0});ye.handleInstagrmLoad=void 0;var Hi=q();function xe(t){"@babel/helpers - typeof";return xe=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},xe(t)}var Yi="https://www.instagram.com/embed.js",Xi=function(){xe(window.instgrm)!=="undefined"&&window.instgrm.Embeds&&xe(window.instgrm.Embeds.process)==="function"&&window.instgrm.Embeds.process()},Zi=function(){return window.instgrm?(Xi(),{status:"instgrmProcess"}):((0,Hi.createScriptTag)(Yi,null),{status:"createScriptTag"})};ye.handleInstagrmLoad=Zi});var Gr=u(ve=>{Object.defineProperty(ve,"__esModule",{value:!0});ve.Instagram=void 0;var Gn=Qi(_()),Ki=g(),Ji=zr();function Qi(t){return t&&t.__esModule?t:{default:t}}var ec=function(e){var r=e.instagramId;return Gn.default.createElement(Ki.GeneralObserver,{onEnter:function(){return(0,Ji.handleInstagrmLoad)()}},Gn.default.createElement("blockquote",{"data-testid":"instagram",className:"instagram-media instagram-mdx-embed","data-instgrm-version":"12"},Gn.default.createElement("a",{href:"https://instagram.com/p/".concat(r)},typeof window<"u"&&!window.instgrm?"Loading":"")))};ve.Instagram=ec});var Un=u(Vn=>{Object.defineProperty(Vn,"__esModule",{value:!0});Object.defineProperty(Vn,"Instagram",{enumerable:!0,get:function(){return nc.Instagram}});var nc=Gr()});var Ur=u(ke=>{Object.defineProperty(ke,"__esModule",{value:!0});ke.Lbry=void 0;var Hn=lc(_()),tc=q(),rc=g();function lc(t){return t&&t.__esModule?t:{default:t}}function Vr(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function ac(t){for(var e=1;e{Object.defineProperty(Yn,"__esModule",{value:!0});Object.defineProperty(Yn,"Lbry",{enumerable:!0,get:function(){return dc.Lbry}});var dc=Ur()});var Xr=u(G=>{Object.defineProperty(G,"__esModule",{value:!0});G.linkedInClassNames=G.handleLinkedInLoad=void 0;var oc=q();function we(t){"@babel/helpers - typeof";return we=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},we(t)}var Hr=!1,Yr=[".LI-profile-badge",".LI-simple-link"].join(",");G.linkedInClassNames=Yr;var uc="https://platform.linkedin.com/badges/js/profile.js",mc=function(){we(window.LI)!=="undefined"&&we(window.LIRenderAll)==="function"&&window.LIRenderAll()},sc=function(){return document.querySelector(Yr)!==null&&!Hr?((0,oc.createScriptTag)(uc,null),Hr=!0,{status:"createScriptTag"}):(mc(),{status:"null"})};G.handleLinkedInLoad=sc});var Zr=u(Oe=>{Object.defineProperty(Oe,"__esModule",{value:!0});Oe.LinkedInBadge=void 0;var Zn=pc(_()),bc=g(),fc=Xr();function pc(t){return t&&t.__esModule?t:{default:t}}var _c=function(e){var r=e.username,l=e.badgeType,i=l===void 0?"vertical":l,c=e.badgeSize,o=c===void 0?"medium":c,s=e.theme,b=s===void 0?"light":s,p=e.locale,x=p===void 0?"en_US":p;return Zn.default.createElement(bc.GeneralObserver,{onEnter:function(){return(0,fc.handleLinkedInLoad)()}},Zn.default.createElement("div",{"data-testid":"linkedin-badge",className:"LI-profile-badge linkedin-badge-embed-mdx","data-version":"v1","data-size":o,"data-locale":x,"data-type":i,"data-theme":b,"data-vanity":r},Zn.default.createElement("a",{className:"LI-simple-link",href:"https://uk.linkedin.com/in/".concat(r,"?trk=profile-badge")},"Loading")))};Oe.LinkedInBadge=_c});var Jn=u(Kn=>{Object.defineProperty(Kn,"__esModule",{value:!0});Object.defineProperty(Kn,"LinkedInBadge",{enumerable:!0,get:function(){return Nc.LinkedInBadge}});var Nc=Zr()});var qe=u(V=>{Object.defineProperty(V,"__esModule",{value:!0});V.pinterestClassNames=V.handlePinterestBuild=void 0;var hc=q();function Pe(t){"@babel/helpers - typeof";return Pe=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Pe(t)}var Kr=!1,Jr=[".pinterest-pin",".pinterest-board",".pinterest-follow-button"].join(",");V.pinterestClassNames=Jr;var gc='!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),a[d]?a[d]+=1:(a[d]=1,a.setTimeout(function(){e=b.getElementsByTagName("SCRIPT")[0],f=b.createElement("SCRIPT"),f.type="text/javascript",f.async=!0,f.src=c.mainUrl+"?"+Math.random(),e.parentNode.insertBefore(f,e)},10))}(window,document,{mainUrl:"//assets.pinterest.com/js/pinit_main.js"});',xc=function(){Pe(window.PinUtils)!=="undefined"&&window.PinUtils&&Pe(window.PinUtils.build)==="function"&&window.PinUtils.build()},yc=function(){return document.querySelector(Jr)!==null&&!Kr?((0,hc.createScriptTag)(null,gc),Kr=!0,{status:"createScriptTag"}):(xc(),{status:"pinterestBuild"})};V.handlePinterestBuild=yc});var el=u(Ee=>{Object.defineProperty(Ee,"__esModule",{value:!0});Ee.Pin=void 0;var Qr=wc(_()),vc=g(),kc=qe();function wc(t){return t&&t.__esModule?t:{default:t}}var Oc=function(e){var r=e.pinId,l=e.size,i=l===void 0?"small":l;return Qr.default.createElement(vc.GeneralObserver,{onEnter:function(){return(0,kc.handlePinterestBuild)()}},Qr.default.createElement("a",{className:"pinterest-pin pinterest-pin-mdx-embed","data-testid":"pin","data-pin-do":"embedPin","data-pin-width":i,href:"https://www.pinterest.com/pin/".concat(r)}))};Ee.Pin=Oc});var tl=u(Te=>{Object.defineProperty(Te,"__esModule",{value:!0});Te.PinterestBoard=void 0;var nl=Ec(_()),Pc=g(),qc=qe();function Ec(t){return t&&t.__esModule?t:{default:t}}var Tc=function(e){var r=e.pinterestLink,l=e.width,i=l===void 0?400:l,c=e.height,o=c===void 0?250:c,s=e.imageWidth,b=s===void 0?80:s,p=e.variant,x=p===void 0?"board":p;return nl.default.createElement(Pc.GeneralObserver,{onEnter:function(){return(0,qc.handlePinterestBuild)()}},nl.default.createElement("a",{className:"pinterest-board pinterest-board-mdx-embed","data-testid":"pinterest-board","data-pin-do":"embed".concat(x.charAt(0).toUpperCase()).concat(x.slice(1)),"data-pin-board-width":i,"data-pin-scale-height":o,"data-pin-scale-width":b,href:"https://www.pinterest.com/".concat(r)}))};Te.PinterestBoard=Tc});var ll=u(Se=>{Object.defineProperty(Se,"__esModule",{value:!0});Se.PinterestFollowButton=void 0;var rl=Mc(_()),Sc=g(),Cc=qe();function Mc(t){return t&&t.__esModule?t:{default:t}}var jc=function(e){var r=e.username;return rl.default.createElement(Sc.GeneralObserver,{onEnter:function(){return(0,Cc.handlePinterestBuild)()}},rl.default.createElement("a",{className:"pinterest-follow-button pinterest-follow-button-mdx-embed","data-testid":"pinterest-follow-button","data-pin-do":"buttonFollow",href:"https://www.pinterest.com/".concat(r,"/")},"Follow @".concat(r)))};Se.PinterestFollowButton=jc});var Qn=u(ne=>{Object.defineProperty(ne,"__esModule",{value:!0});Object.defineProperty(ne,"Pin",{enumerable:!0,get:function(){return Rc.Pin}});Object.defineProperty(ne,"PinterestBoard",{enumerable:!0,get:function(){return Lc.PinterestBoard}});Object.defineProperty(ne,"PinterestFollowButton",{enumerable:!0,get:function(){return Ic.PinterestFollowButton}});var Rc=el(),Lc=tl(),Ic=ll()});var il=u(Ce=>{Object.defineProperty(Ce,"__esModule",{value:!0});Ce.Replit=void 0;var al=Dc(_()),Bc=g();function Dc(t){return t&&t.__esModule?t:{default:t}}var Fc=function(e){var r=e.repl,l=e.height,i=l===void 0?500:l,c=e.mode,o=c===void 0?"embed":c,s=r.startsWith("http")?r:"https://repl.it/".concat(r),b=o==="embed"?"?embed=true":"?lite=true";return al.default.createElement(Bc.GeneralObserver,{height:i},al.default.createElement("iframe",{"data-testid":"replit-"+o,frameBorder:"0",width:"100%",height:i,src:s+b}))};Ce.Replit=Fc});var nt=u(et=>{Object.defineProperty(et,"__esModule",{value:!0});Object.defineProperty(et,"Replit",{enumerable:!0,get:function(){return Ac.Replit}});var Ac=il()});var cl=u(Me=>{Object.defineProperty(Me,"__esModule",{value:!0});Me.SimplecastEpisode=void 0;var tt=$c(_()),Wc=g();function $c(t){return t&&t.__esModule?t:{default:t}}var zc=function(e){var r=e.episodeId,l=e.theme,i=l===void 0?"light":l;return tt.default.createElement(Wc.GeneralObserver,null,tt.default.createElement("div",{className:"simplecast-episode-mdx-embed",style:{position:"relative",height:"200px",width:"100%"}},tt.default.createElement("iframe",{"data-testid":"simplecast-episode",title:"simplecast-".concat(r),src:"https://player.simplecast.com/".concat(r).concat(i==="dark"?"?dark=true":""),frameBorder:"no",scrolling:"no",seamless:!0,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}})))};Me.SimplecastEpisode=zc});var lt=u(rt=>{Object.defineProperty(rt,"__esModule",{value:!0});Object.defineProperty(rt,"SimplecastEpisode",{enumerable:!0,get:function(){return Gc.SimplecastEpisode}});var Gc=cl()});var ol=u(je=>{Object.defineProperty(je,"__esModule",{value:!0});je.SoundCloud=void 0;var dl=Uc(_()),Vc=g();function Uc(t){return t&&t.__esModule?t:{default:t}}var Hc=function(e){var r=e.soundCloudLink,l=e.width,i=l===void 0?"100%":l,c=e.height,o=c===void 0?"auto":c,s=e.autoPlay,b=s===void 0?!1:s,p=e.visual,x=p===void 0?!1:p,w=e.color;return dl.default.createElement(Vc.GeneralObserver,null,dl.default.createElement("iframe",{"data-testid":"soundcloud",title:"sound-cloud-".concat(r),className:"soundcloud-mdx-embed",width:i,height:o,scrolling:"no",frameBorder:"no",allow:"autoplay",src:"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/".concat(r,"&color=%23").concat(w,"&auto_play=").concat(b,"&visual=").concat(x)}))};je.SoundCloud=Hc});var it=u(at=>{Object.defineProperty(at,"__esModule",{value:!0});Object.defineProperty(at,"SoundCloud",{enumerable:!0,get:function(){return Yc.SoundCloud}});var Yc=ol()});var ml=u(Re=>{Object.defineProperty(Re,"__esModule",{value:!0});Re.Spotify=void 0;var ul=Zc(_()),Xc=g();function Zc(t){return t&&t.__esModule?t:{default:t}}var Kc=function(e){var r=e.spotifyLink,l=e.width,i=l===void 0?320:l,c=e.height,o=c===void 0?380:c;return ul.default.createElement(Xc.GeneralObserver,null,ul.default.createElement("iframe",{"data-testid":"spotify",title:"spotify-".concat(r),className:"spotify-mdx-embed",src:"https://open.spotify.com/embed/".concat(r),width:i,height:o,frameBorder:"0",allow:"encrypted-media"}))};Re.Spotify=Kc});var dt=u(ct=>{Object.defineProperty(ct,"__esModule",{value:!0});Object.defineProperty(ct,"Spotify",{enumerable:!0,get:function(){return Jc.Spotify}});var Jc=ml()});var sl=u(Le=>{Object.defineProperty(Le,"__esModule",{value:!0});Le.Strava=void 0;var ot=ed(_()),Qc=g();function ed(t){return t&&t.__esModule?t:{default:t}}var nd=function(e){var r=e.activityId;return ot.default.createElement(Qc.GeneralObserver,null,ot.default.createElement("div",{"data-testid":"strava",className:"strava-mdx-embed",style:{position:"relative",height:"350px",maxWidth:"568px",width:"100%",overflow:"auto"}},ot.default.createElement("iframe",{title:"strava-".concat(r),className:"strava-mdx-embed",height:"100%",width:"100%",style:{minWidth:"380px"},frameBorder:"0",scrolling:"no",src:"https://www.strava.com/activities/".concat(r)})))};Le.Strava=nd});var mt=u(ut=>{Object.defineProperty(ut,"__esModule",{value:!0});Object.defineProperty(ut,"Strava",{enumerable:!0,get:function(){return td.Strava}});var td=sl()});var fl=u(Ie=>{Object.defineProperty(Ie,"__esModule",{value:!0});Ie.Snack=void 0;var bl=ad(_()),rd=q(),ld=g();function ad(t){return t&&t.__esModule?t:{default:t}}var id="https://snack.expo.io/embed.js",cd=function(e){var r=e.snackId,l=e.platform,i=l===void 0?"web":l,c=e.theme,o=c===void 0?"light":c,s=function(){(0,rd.createScriptTag)(id,null)};return bl.default.createElement(ld.GeneralObserver,{onEnter:s},bl.default.createElement("div",{className:"snack-mdx-embed","data-testid":"snack","data-snack-id":r,"data-snack-platform":i,"data-snack-preview":"true","data-snack-theme":o,style:{overflow:"hidden",background:"#F9F9F9",border:"1px solid var(--color-border)",borderRadius:"4px",height:"505px",width:"100%"}}))};Ie.Snack=cd});var bt=u(st=>{Object.defineProperty(st,"__esModule",{value:!0});Object.defineProperty(st,"Snack",{enumerable:!0,get:function(){return dd.Snack}});var dd=fl()});var _l=u(U=>{Object.defineProperty(U,"__esModule",{value:!0});U.tikTokClassNames=U.handleTikTokLoad=void 0;var od=q(),pl=!1,ud=".tiktok-embed";U.tikTokClassNames=ud;var md="https://www.tiktok.com/embed.js",sd=function(){return pl?{status:"null"}:((0,od.createScriptTag)(md,null),pl=!0,{status:"createScriptTag"})};U.handleTikTokLoad=sd});var Nl=u(De=>{Object.defineProperty(De,"__esModule",{value:!0});De.TikTok=void 0;var Be=pd(_()),bd=g(),fd=_l();function pd(t){return t&&t.__esModule?t:{default:t}}var _d=function(e){var r=e.tikTokId;return r?Be.default.createElement(bd.GeneralObserver,{onEnter:function(){return(0,fd.handleTikTokLoad)()}},Be.default.createElement("blockquote",{"data-testid":"tiktok",className:"tiktok-embed",cite:"https://www.tiktok.com/".concat(r),"data-video-id":r.split("/").pop()},Be.default.createElement("section",null,Be.default.createElement("a",{href:"https://tiktok.com/".concat(r)},typeof window<"u"&&!window.tiktok?"Loading":"")))):null};De.TikTok=_d});var pt=u(ft=>{Object.defineProperty(ft,"__esModule",{value:!0});Object.defineProperty(ft,"TikTok",{enumerable:!0,get:function(){return Nd.TikTok}});var Nd=Nl()});var gl=u(_t=>{Object.defineProperty(_t,"__esModule",{value:!0});_t.constructTwitchURL=hd;var hl=q();function hd(t,e,r,l){var i=[l];return t!==void 0?i.push("&video=v".concat(t)):(0,hl.isEmptyString)(e)?(0,hl.isEmptyString)(r)||i.push("&collection=".concat(r)):i.push("&channel=".concat(e)),i.join("")}});var yl=u(Fe=>{Object.defineProperty(Fe,"__esModule",{value:!0});Fe.Twitch=void 0;var Nt=vd(_()),gd=q(),xd=g(),yd=gl();function vd(t){return t&&t.__esModule?t:{default:t}}function xl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function kd(t){for(var e=1;e{Object.defineProperty(ht,"__esModule",{value:!0});Object.defineProperty(ht,"Twitch",{enumerable:!0,get:function(){return Pd.Twitch}});var Pd=yl()});var A=u(We=>{Object.defineProperty(We,"__esModule",{value:!0});We.handleTwttrLoad=void 0;var qd=q();function Ae(t){"@babel/helpers - typeof";return Ae=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ae(t)}var Ed=` !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs") `,Td=function(){Ae(window.twttr)!=="undefined"&&window.twttr.widgets&&Ae(window.twttr.widgets.load)==="function"&&window.twttr.widgets.load(document.getElementsByClassName("mdx-embed"))},Sd=function(){return window.twttr?(Td(),{status:"twttrLoad"}):((0,qd.createScriptTag)(null,Ed),{status:"createScriptTag"})};We.handleTwttrLoad=Sd});var vl=u(ze=>{Object.defineProperty(ze,"__esModule",{value:!0});ze.Tweet=void 0;var $e=jd(_()),Cd=g(),Md=A();function jd(t){return t&&t.__esModule?t:{default:t}}var Rd=function(e){var r=e.tweetLink,l=e.theme,i=l===void 0?"light":l,c=e.align,o=c===void 0?"left":c,s=e.hideConversation,b=s===void 0?!1:s;return $e.default.createElement(Cd.GeneralObserver,{onEnter:function(){return(0,Md.handleTwttrLoad)()}},$e.default.createElement("div",{"data-testid":"twitter-tweet",className:"twitter-tweet-mdx-embed",style:{overflow:"auto"}},$e.default.createElement("blockquote",{className:"twitter-tweet","data-theme":i,"data-align":o,"data-conversation":b?"none":""},$e.default.createElement("a",{href:"https://twitter.com/".concat(r,"?ref_src=twsrc%5Etfw")},typeof window<"u"&&!window.twttr?"Loading":""))))};ze.Tweet=Rd});var wl=u(Ge=>{Object.defineProperty(Ge,"__esModule",{value:!0});Ge.TwitterFollowButton=void 0;var kl=Bd(_()),Ld=g(),Id=A();function Bd(t){return t&&t.__esModule?t:{default:t}}var Dd=function(e){var r=e.username,l=e.showFollowers,i=l===void 0?!1:l,c=e.showUsername,o=c===void 0?!0:c,s=e.size,b=s===void 0?"small":s;return kl.default.createElement(Ld.GeneralObserver,{onEnter:function(){return(0,Id.handleTwttrLoad)()}},kl.default.createElement("a",{"data-testid":"twitter-follow-button",href:"https://twitter.com/".concat(r,"?ref_src=twsrc%5Etfw"),className:"twitter-follow-button twitter-follow-button-mdx-embed","data-show-count":i,"data-show-screen-name":o,"data-size":b},"Follow @".concat(r)))};Ge.TwitterFollowButton=Dd});var Pl=u(Ve=>{Object.defineProperty(Ve,"__esModule",{value:!0});Ve.TwitterHashtagButton=void 0;var Ol=Wd(_()),Fd=g(),Ad=A();function Wd(t){return t&&t.__esModule?t:{default:t}}var $d=function(e){var r=e.hashtag,l=e.size,i=l===void 0?"small":l;return Ol.default.createElement(Fd.GeneralObserver,{onEnter:function(){return(0,Ad.handleTwttrLoad)()}},Ol.default.createElement("a",{"data-testid":"twitter-hashtag-button",href:"https://twitter.com/intent/tweet?button_hashtag=".concat(r,"&ref_src=twsrc%5Etfw"),className:"twitter-hashtag-button twitter-hashtag-button-mdx-embed","data-size":i},"Tweet #".concat(r)))};Ve.TwitterHashtagButton=$d});var ql=u(Ue=>{Object.defineProperty(Ue,"__esModule",{value:!0});Ue.TwitterList=void 0;var xt=Vd(_()),zd=g(),Gd=A();function Vd(t){return t&&t.__esModule?t:{default:t}}var Ud=function(e){var r=e.username,l=e.theme,i=l===void 0?"light":l,c=e.listName,o=e.width,s=o===void 0?"498px":o,b=e.height,p=b===void 0?null:b;return xt.default.createElement(zd.GeneralObserver,{onEnter:function(){return(0,Gd.handleTwttrLoad)()}},xt.default.createElement("div",{style:{overflow:"auto"}},xt.default.createElement("a",{"data-testid":"twitter-list",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":s,"data-height":p,href:"https://twitter.com/".concat(r,"/lists/").concat(c,"?ref_src=twsrc%5Etfw")},"A Twitter List by @".concat(r))))};Ue.TwitterList=Ud});var Tl=u(He=>{Object.defineProperty(He,"__esModule",{value:!0});He.TwitterMentionButton=void 0;var El=Xd(_()),Hd=g(),Yd=A();function Xd(t){return t&&t.__esModule?t:{default:t}}var Zd=function(e){var r=e.username,l=e.size,i=l===void 0?"small":l;return El.default.createElement(Hd.GeneralObserver,{onEnter:function(){return(0,Yd.handleTwttrLoad)()}},El.default.createElement("a",{"data-testid":"twitter-mention-button",href:"https://twitter.com/intent/tweet?screen_name=".concat(r,"&ref_src=twsrc%5Etfw"),className:"twitter-mention-button twitter-mention-button-mdx-embed","data-size":i},"Tweet to @".concat(r)))};He.TwitterMentionButton=Zd});var Sl=u(Ye=>{Object.defineProperty(Ye,"__esModule",{value:!0});Ye.TwitterTimeline=void 0;var yt=Qd(_()),Kd=g(),Jd=A();function Qd(t){return t&&t.__esModule?t:{default:t}}var eo=function(e){var r=e.username,l=e.theme,i=l===void 0?"light":l,c=e.showLikes,o=c===void 0?null:c,s=e.width,b=s===void 0?"498px":s,p=e.height,x=p===void 0?null:p;return yt.default.createElement(Kd.GeneralObserver,{onEnter:function(){return(0,Jd.handleTwttrLoad)()}},yt.default.createElement("div",{style:{overflow:"auto"}},yt.default.createElement("a",{"data-testid":"twitter-timeline",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":b,"data-height":x,href:"https://twitter.com/".concat(r).concat(o?"/likes":"","?ref_src=twsrc%5Etfw")},"Tweets by @".concat(r))))};Ye.TwitterTimeline=eo});var vt=u(D=>{Object.defineProperty(D,"__esModule",{value:!0});Object.defineProperty(D,"Tweet",{enumerable:!0,get:function(){return no.Tweet}});Object.defineProperty(D,"TwitterFollowButton",{enumerable:!0,get:function(){return to.TwitterFollowButton}});Object.defineProperty(D,"TwitterHashtagButton",{enumerable:!0,get:function(){return ro.TwitterHashtagButton}});Object.defineProperty(D,"TwitterList",{enumerable:!0,get:function(){return lo.TwitterList}});Object.defineProperty(D,"TwitterMentionButton",{enumerable:!0,get:function(){return ao.TwitterMentionButton}});Object.defineProperty(D,"TwitterTimeline",{enumerable:!0,get:function(){return io.TwitterTimeline}});var no=vl(),to=wl(),ro=Pl(),lo=ql(),ao=Tl(),io=Sl()});var Ml=u(Xe=>{Object.defineProperty(Xe,"__esModule",{value:!0});Xe.Vimeo=void 0;var kt=uo(_()),co=q(),oo=g();function uo(t){return t&&t.__esModule?t:{default:t}}function Cl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function mo(t){for(var e=1;e{Object.defineProperty(wt,"__esModule",{value:!0});Object.defineProperty(wt,"Vimeo",{enumerable:!0,get:function(){return fo.Vimeo}});var fo=Ml()});var Ll=u(Ze=>{Object.defineProperty(Ze,"__esModule",{value:!0});Ze.Whimsical=void 0;var Pt=_o(_()),po=g();function _o(t){return t&&t.__esModule?t:{default:t}}function jl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function No(t){for(var e=1;et.length)&&(e=t.length);for(var r=0,l=new Array(e);r{Object.defineProperty(qt,"__esModule",{value:!0});Object.defineProperty(qt,"Whimsical",{enumerable:!0,get:function(){return Po.Whimsical}});var Po=Ll()});var Dl=u(Je=>{function Tt(t){"@babel/helpers - typeof";return Tt=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Tt(t)}Object.defineProperty(Je,"__esModule",{value:!0});Je.Wikipedia=void 0;var Ke=Eo(_()),qo=g();function Bl(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(Bl=function(i){return i?r:e})(t)}function Eo(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Tt(t)!=="object"&&typeof t!="function")return{default:t};var r=Bl(e);if(r&&r.has(t))return r.get(t);var l={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in t)if(c!=="default"&&Object.prototype.hasOwnProperty.call(t,c)){var o=i?Object.getOwnPropertyDescriptor(t,c):null;o&&(o.get||o.set)?Object.defineProperty(l,c,o):l[c]=t[c]}return l.default=t,r&&r.set(t,l),l}function To(t,e){return jo(t)||Mo(t,e)||Co(t,e)||So()}function So(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Co(t,e){if(t){if(typeof t=="string")return Il(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Il(t,e)}}function Il(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,l=new Array(e);r{Object.defineProperty(St,"__esModule",{value:!0});Object.defineProperty(St,"Wikipedia",{enumerable:!0,get:function(){return Lo.Wikipedia}});var Lo=Dl()});var Al=u(Qe=>{Object.defineProperty(Qe,"__esModule",{value:!0});Qe.handleWistiaLoad=void 0;var Io=q(),Fl=!1,Bo="https://fast.wistia.net/assets/external/E-v1.js",Do=function(){Fl||((0,Io.createScriptTag)(Bo,null),Fl=!0)};Qe.handleWistiaLoad=Do});var zl=u(nn=>{function Mt(t){"@babel/helpers - typeof";return Mt=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Mt(t)}Object.defineProperty(nn,"__esModule",{value:!0});nn.Wistia=void 0;var en=$o(_()),Fo=q(),Ao=g(),Wo=Al();function $l(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return($l=function(i){return i?r:e})(t)}function $o(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Mt(t)!=="object"&&typeof t!="function")return{default:t};var r=$l(e);if(r&&r.has(t))return r.get(t);var l={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in t)if(c!=="default"&&Object.prototype.hasOwnProperty.call(t,c)){var o=i?Object.getOwnPropertyDescriptor(t,c):null;o&&(o.get||o.set)?Object.defineProperty(l,c,o):l[c]=t[c]}return l.default=t,r&&r.set(t,l),l}function Wl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function zo(t){for(var e=1;e0?"?"+M.join("&"):""),"data-testid":"wistia",allow:"autoplay; ".concat(i?"fullscreen":""),frameBorder:"0",scrolling:"no",className:"wistia-mdx-embed-iframe",allowFullScreen:i,style:{position:"absolute",top:0,left:0,width:b,height:x}})))};nn.Wistia=Vo});var Rt=u(jt=>{Object.defineProperty(jt,"__esModule",{value:!0});Object.defineProperty(jt,"Wistia",{enumerable:!0,get:function(){return Uo.Wistia}});var Uo=zl()});var Vl=u(tn=>{Object.defineProperty(tn,"__esModule",{value:!0});tn.YouTube=void 0;var Lt=Xo(_()),Ho=q(),Yo=g();function Xo(t){return t&&t.__esModule?t:{default:t}}function Gl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function Zo(t){for(var e=1;e{Object.defineProperty(It,"__esModule",{value:!0});Object.defineProperty(It,"YouTube",{enumerable:!0,get:function(){return Qo.YouTube}});var Qo=Vl()});function Ul(t){return e;function e(r){let l=ln(r.components);return H.default.createElement(t,{...r,allComponents:l})}}function ln(t){let e=H.default.useContext(rn);return H.default.useMemo(()=>typeof t=="function"?t(e):{...e,...t},[e,t])}function Hl({components:t,children:e,disableParentContext:r}){let l;return r?l=typeof t=="function"?t({}):t||eu:l=ln(t),H.default.createElement(rn.Provider,{value:l},e)}var H,rn,eu,Yl=sr(()=>{H=gn(_(),1),rn=H.default.createContext({});eu={}});var Xl={};br(Xl,{MDXContext:()=>rn,MDXProvider:()=>Hl,useMDXComponents:()=>ln,withMDXComponents:()=>Ul});var Zl=sr(()=>{Yl()});var Jl=u(an=>{Object.defineProperty(an,"__esModule",{value:!0});an.Cinnamon=void 0;var Dt=ru(_()),nu=q(),tu=g();function ru(t){return t&&t.__esModule?t:{default:t}}function Kl(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,l)}return r}function lu(t){for(var e=1;e{Object.defineProperty(Ft,"__esModule",{value:!0});Object.defineProperty(Ft,"Cinnamon",{enumerable:!0,get:function(){return cu.Cinnamon}});var cu=Jl()});var na=u(cn=>{Object.defineProperty(cn,"__esModule",{value:!0});cn.components=void 0;var ea=On(),du=En(),ou=Ql(),uu=Sn(),mu=Mn(),su=Ln(),bu=An(),fu=Dn(),pu=zn(),_u=Un(),Nu=Xn(),hu=Jn(),At=Qn(),gu=nt(),xu=lt(),yu=it(),vu=dt(),ku=mt(),wu=bt(),Ou=pt(),Pu=gt(),Y=vt(),qu=Ot(),Eu=Et(),Tu=Ct(),Su=Rt(),Cu=Bt(),Mu={AirtableBase:ea.AirtableBase,AirtableForm:ea.AirtableForm,Buzzsprout:du.Buzzsprout,Cinnamon:ou.Cinnamon,CodePen:uu.CodePen,CodeSandbox:mu.CodeSandbox,EggheadLesson:su.EggheadLesson,Figma:bu.Figma,Flickr:fu.Flickr,Gist:pu.Gist,Instagram:_u.Instagram,Lbry:Nu.Lbry,LinkedInBadge:hu.LinkedInBadge,Pin:At.Pin,PinterestBoard:At.PinterestBoard,PinterestFollowButton:At.PinterestFollowButton,Replit:gu.Replit,SimplecastEpisode:xu.SimplecastEpisode,SoundCloud:yu.SoundCloud,Spotify:vu.Spotify,Strava:ku.Strava,Snack:wu.Snack,TikTok:Ou.TikTok,Twitch:Pu.Twitch,Tweet:Y.Tweet,TwitterFollowButton:Y.TwitterFollowButton,TwitterHashtagButton:Y.TwitterHashtagButton,TwitterList:Y.TwitterList,TwitterMentionButton:Y.TwitterMentionButton,TwitterTimeline:Y.TwitterTimeline,Vimeo:qu.Vimeo,Whimsical:Eu.Whimsical,Wikipedia:Tu.Wikipedia,Wistia:Su.Wistia,YouTube:Cu.YouTube};cn.components=Mu});var ta=u(dn=>{Object.defineProperty(dn,"__esModule",{value:!0});dn.MDXEmbedProvider=void 0;var ju=Iu(_()),Ru=(Zl(),pr(Xl)),Lu=na();function Iu(t){return t&&t.__esModule?t:{default:t}}var Bu=function(e){var r=e.children;return ju.default.createElement(Ru.MDXProvider,{components:Lu.components},r)};dn.MDXEmbedProvider=Bu});var ra=u(Wt=>{Object.defineProperty(Wt,"__esModule",{value:!0});Object.defineProperty(Wt,"MDXEmbedProvider",{enumerable:!0,get:function(){return Du.MDXEmbedProvider}});var Du=ta()});var aa=u(N=>{Object.defineProperty(N,"__esModule",{value:!0});Object.defineProperty(N,"AirtableBase",{enumerable:!0,get:function(){return la.AirtableBase}});Object.defineProperty(N,"AirtableForm",{enumerable:!0,get:function(){return la.AirtableForm}});Object.defineProperty(N,"Buzzsprout",{enumerable:!0,get:function(){return Fu.Buzzsprout}});Object.defineProperty(N,"CodePen",{enumerable:!0,get:function(){return Au.CodePen}});Object.defineProperty(N,"CodeSandbox",{enumerable:!0,get:function(){return Wu.CodeSandbox}});Object.defineProperty(N,"EggheadLesson",{enumerable:!0,get:function(){return $u.EggheadLesson}});Object.defineProperty(N,"Figma",{enumerable:!0,get:function(){return Gu.Figma}});Object.defineProperty(N,"Flickr",{enumerable:!0,get:function(){return zu.Flickr}});Object.defineProperty(N,"Gist",{enumerable:!0,get:function(){return Vu.Gist}});Object.defineProperty(N,"Instagram",{enumerable:!0,get:function(){return Uu.Instagram}});Object.defineProperty(N,"Lbry",{enumerable:!0,get:function(){return Hu.Lbry}});Object.defineProperty(N,"LinkedInBadge",{enumerable:!0,get:function(){return Yu.LinkedInBadge}});Object.defineProperty(N,"MDXEmbedProvider",{enumerable:!0,get:function(){return dm.MDXEmbedProvider}});Object.defineProperty(N,"Pin",{enumerable:!0,get:function(){return $t.Pin}});Object.defineProperty(N,"PinterestBoard",{enumerable:!0,get:function(){return $t.PinterestBoard}});Object.defineProperty(N,"PinterestFollowButton",{enumerable:!0,get:function(){return $t.PinterestFollowButton}});Object.defineProperty(N,"Replit",{enumerable:!0,get:function(){return Xu.Replit}});Object.defineProperty(N,"SimplecastEpisode",{enumerable:!0,get:function(){return Zu.SimplecastEpisode}});Object.defineProperty(N,"Snack",{enumerable:!0,get:function(){return em.Snack}});Object.defineProperty(N,"SoundCloud",{enumerable:!0,get:function(){return Ku.SoundCloud}});Object.defineProperty(N,"Spotify",{enumerable:!0,get:function(){return Ju.Spotify}});Object.defineProperty(N,"Strava",{enumerable:!0,get:function(){return Qu.Strava}});Object.defineProperty(N,"TikTok",{enumerable:!0,get:function(){return nm.TikTok}});Object.defineProperty(N,"Tweet",{enumerable:!0,get:function(){return X.Tweet}});Object.defineProperty(N,"Twitch",{enumerable:!0,get:function(){return tm.Twitch}});Object.defineProperty(N,"TwitterFollowButton",{enumerable:!0,get:function(){return X.TwitterFollowButton}});Object.defineProperty(N,"TwitterHashtagButton",{enumerable:!0,get:function(){return X.TwitterHashtagButton}});Object.defineProperty(N,"TwitterList",{enumerable:!0,get:function(){return X.TwitterList}});Object.defineProperty(N,"TwitterMentionButton",{enumerable:!0,get:function(){return X.TwitterMentionButton}});Object.defineProperty(N,"TwitterTimeline",{enumerable:!0,get:function(){return X.TwitterTimeline}});Object.defineProperty(N,"Vimeo",{enumerable:!0,get:function(){return rm.Vimeo}});Object.defineProperty(N,"Whimsical",{enumerable:!0,get:function(){return lm.Whimsical}});Object.defineProperty(N,"Wikipedia",{enumerable:!0,get:function(){return am.Wikipedia}});Object.defineProperty(N,"Wistia",{enumerable:!0,get:function(){return im.Wistia}});Object.defineProperty(N,"YouTube",{enumerable:!0,get:function(){return cm.YouTube}});var la=On(),Fu=En(),Au=Sn(),Wu=Mn(),$u=Ln(),zu=Dn(),Gu=An(),Vu=zn(),Uu=Un(),Hu=Xn(),Yu=Jn(),$t=Qn(),Xu=nt(),Zu=lt(),Ku=it(),Ju=dt(),Qu=mt(),em=bt(),nm=pt(),tm=gt(),X=vt(),rm=Ot(),lm=Et(),am=Ct(),im=Rt(),cm=Bt(),dm=ra()});var sm={};br(sm,{default:()=>mm,frontmatter:()=>om});var n=gn(gr()),ca=gn(aa()),om={title:"Animated SVG Water Pictorial Fraction in Svelte",slug:"svelte-animated-water-svg-pictorial-fraction",draft:!1,date:new Date(16097184e5),category:"dev",tags:["Data Visualization","Svelte","SVG"],lastmod:new Date(1676706091950),excerpt:"Create a pictorial fraction of water in SVG using Svelte. Allows for percentage progress so the image looks like it's filling or draining.",cover:"https://res.cloudinary.com/joelmturner/image/upload/v1655157939/Posts/svelte-animated-water-svg-pictorial-fraction"};function ia(t){let e=Object.assign({h2:"h2",ul:"ul",li:"li",a:"a",p:"p",code:"code",pre:"pre",div:"div",span:"span"},t.components);return(0,n.jsxDEV)(n.Fragment,{children:[(0,n.jsxDEV)(e.h2,{id:"table-of-contents",children:"Table of Contents"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:1},this),` `,(0,n.jsxDEV)(e.ul,{children:[` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#what-were-building",children:"What We're Building"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#why-sveltejs",children:"Why Svelte.js?"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#the-pieces",children:"The Pieces"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#fill-area",children:"Fill Area"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#mask-area",children:"Mask Area"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#fill",children:"Fill"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#using-the-component",children:"Using the component"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.li,{children:(0,n.jsxDEV)(e.a,{href:"#conclusion",children:"Conclusion"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),` `,(0,n.jsxDEV)(e.h2,{id:"what-were-building",children:"What We're Building"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:23,columnNumber:1},this),` `,(0,n.jsxDEV)(ca.CodeSandbox,{codeSandboxId:"svelte-svg-pictorial-fraction-f1hv2"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:25,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{id:"why-sveltejs",children:"Why Svelte.js?"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:27,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["I've been excited to check out ",(0,n.jsxDEV)(e.a,{href:"https://svelte.dev/",rel:"nofollow",children:"svelte.js"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:29,columnNumber:32},this)," for a while and this winter break gave me some time to try it out. It seemed especially great as a way to run data vis in a light-weight way. This was a way to learn a little more about it and see I can make multiple components."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:29,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{id:"the-pieces",children:"The Pieces"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:31,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"The pictorial fraction is a combination of svg pieces that come together to show and mask elements."},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:33,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{id:"fill-area",children:"Fill Area"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:35,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Let's create a new file and call it ",(0,n.jsxDEV)(e.code,{children:"PictorialFraction.svelte"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:37,columnNumber:37},this),". In here, we'll set up our svg and add a rectangle with a color of your choosing. This will be the color that will show up in the droplet."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:37,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"hljs language-html",filename:"PictorialFraction.svelte",children:[(0,n.jsxDEV)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:49},this),"svg"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:25},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"xmlns"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:105},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:178},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:230},this),"http://www.w3.org/2000/svg",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:296},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:147},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:344},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:417},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:469},this),"264.5",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:514},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:386},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:562},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:636},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:688},this),"264.5",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:733},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:605},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:780},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:51},this),"rect"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:27},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:108},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:181},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:233},this),"264.5",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:278},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:150},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:326},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:400},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:452},this),"264.5",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:497},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:369},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"fill"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:545},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:617},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:669},this),"#ff9900",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:716},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:586},this)," ",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:764},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:105},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:39,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:39,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"Now we can add some variables for width and height. In svelte, we export these in the script tag. We can also pass those variables into the elements."},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:45,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,Object.assign({"1-4":""},{"6-7":""},{children:(0,n.jsxDEV)(e.code,Object.assign({className:"hljs language-html"},{"1-4":""},{"6-7":""},{children:[(0,n.jsxDEV)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:49},this),"script"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:25},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:107},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:1},this),(0,n.jsxDEV)(e.span,{className:"token script",children:(0,n.jsxDEV)(e.span,{className:"token language-javascript",children:[` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:45},this)," width",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:89},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:45},this)," height",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:90},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:181},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:154},this),(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:122},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:15},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:49},this),"svg"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:25},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"xmlns"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:105},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:178},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:230},this),"http://www.w3.org/2000/svg",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:296},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:147},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:344},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:417},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:469},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:516},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:386},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:564},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:638},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:690},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:738},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:607},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:785},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:51},this),"rect"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:27},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:108},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:181},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:233},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:280},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:150},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:328},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:402},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:454},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:502},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:371},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"fill"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:550},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:622},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:674},this),"#ff9900",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:721},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:591},this)," ",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:769},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:105},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)]}),void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:47,columnNumber:1},this)}),void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:47,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["\u{1F4A1} Svelte tip: we can use a shortcut to add those variables since they have the same name as the attributes. Instead of ",(0,n.jsxDEV)(e.code,{children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:58,columnNumber:121},this)," we can use ",(0,n.jsxDEV)(e.code,{children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:58,columnNumber:156},this),"."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:58,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Let's position the rectangle using ",(0,n.jsxDEV)(e.code,{children:"transform: translate(0, 20px);"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:60,columnNumber:36},this),". This should allow us to ",(0,n.jsxDEV)(e.code,{children:"slide"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:60,columnNumber:94},this)," the rectangle up using the y position, giving our mask the feeling that the water drop is filling up. We're using the style attribute for transform rather than the ",(0,n.jsxDEV)(e.code,{children:"transform"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:60,columnNumber:266},this)," attribute on ",(0,n.jsxDEV)(e.code,{children:"rect"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:60,columnNumber:291},this)," because Safari doesn't animate the attribute in the same way Chrome and Firefox do, making it choppy."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:60,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"hljs language-html",line:"7",children:[(0,n.jsxDEV)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:49},this),"script"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:25},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:107},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:1},this),(0,n.jsxDEV)(e.span,{className:"token script",children:(0,n.jsxDEV)(e.span,{className:"token language-javascript",children:[` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:45},this)," width",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:89},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:45},this)," height",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:90},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:181},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:154},this),(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:122},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:15},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:49},this),"svg"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:25},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"xmlns"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:105},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:178},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:230},this),"http://www.w3.org/2000/svg",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:296},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:147},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:344},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:417},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:469},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:516},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:386},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:564},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:638},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:690},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:738},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:607},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:785},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:51},this),"rect"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:27},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:78},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:130},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:177},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:47},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:79},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:131},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:179},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:48},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token special-attr",children:[(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"style"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:38},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:111},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:163},this),(0,n.jsxDEV)(e.span,{className:"token value css language-css",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"{"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:246},this),"`",(0,n.jsxDEV)(e.span,{className:"token property",children:"transform"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:287},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:":"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:332},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:203},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:379},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:80},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"translate(0,"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:11,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"20px);`}"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:12,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"fill"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:77},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:129},this),"#ff9900",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:176},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:46},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:14,columnNumber:3},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:15,columnNumber:105},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:15,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:62,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:62,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:[`Now we'll create the ripple shape that will be placed on top of our rectangle to give a "fluid" feel. For this, we'll use a `,(0,n.jsxDEV)(e.code,{children:"path"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:80,columnNumber:125},this)," element and animate it with css."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:80,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"hljs language-html",children:(0,n.jsxDEV)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:49},this),"path"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:25},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"class"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:3},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:76},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:128},this),"water",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:173},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:45},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"d"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:3},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:72},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:124},this),"M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:925},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:41},this),` `,(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:1},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:82,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:82,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["That creates the shape, and now we'll position it to be on top of the rectangle. To do this we'll need to know where the rectangle will be positioned, and we'll wrap the ",(0,n.jsxDEV)(e.code,{children:"path"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:89,columnNumber:171},this)," in group that's positioned based on ",(0,n.jsxDEV)(e.code,{children:"rect"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:89,columnNumber:214},this),"'s y position."]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:89,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"hljs language-html",line:"9-11",children:[(0,n.jsxDEV)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:49},this),"script"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:25},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:107},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:1},this),(0,n.jsxDEV)(e.span,{className:"token script",children:(0,n.jsxDEV)(e.span,{className:"token language-javascript",children:[` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:45},this)," width",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:2,columnNumber:89},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"export"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:3},this)," ",(0,n.jsxDEV)(e.span,{className:"token keyword",children:"let"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:45},this)," height",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:";"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:3,columnNumber:90},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:181},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:1,columnNumber:154},this),(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:122},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:4,columnNumber:15},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:49},this),"svg"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:25},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"xmlns"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:105},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:178},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:230},this),"http://www.w3.org/2000/svg",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:296},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:147},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:344},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:417},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:469},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:516},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:386},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:564},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:638},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:690},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:738},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:607},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:785},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:6,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:51},this),"rect"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:27},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"width"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:78},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:130},this),"{width}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:177},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:8,columnNumber:47},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"height"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:79},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:131},this),"{height}",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:179},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:9,columnNumber:48},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token special-attr",children:[(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"style"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:38},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:111},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:163},this),(0,n.jsxDEV)(e.span,{className:"token value css language-css",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"{"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:246},this),"`",(0,n.jsxDEV)(e.span,{className:"token property",children:"transform"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:287},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:":"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:332},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:203},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:379},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:80},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:10,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"translate(0,"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:11,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"20px);`}"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:12,columnNumber:5},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"fill"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:5},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:77},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:129},this),"#ff9900",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:176},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:13,columnNumber:46},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:14,columnNumber:3},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:7,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:` `},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:51},this),"g"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:27},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"class"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:105},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:178},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:230},this),"water-container",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:285},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:147},this)," ",(0,n.jsxDEV)(e.span,{className:"token special-attr",children:[(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"style"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:366},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:439},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:491},this),(0,n.jsxDEV)(e.span,{className:"token value css language-css",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"{"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:574},this),"`",(0,n.jsxDEV)(e.span,{className:"token property",children:"transform"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:615},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:":"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:660},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:531},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:707},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:408},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:333},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"translate(0,"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:762},this)," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"0);`}"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:812},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:">"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:854},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:16,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"<"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:17,columnNumber:53},this),"path"]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:17,columnNumber:29},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"class"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:18,columnNumber:7},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:18,columnNumber:80},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:18,columnNumber:132},this),"water",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:18,columnNumber:177},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:18,columnNumber:49},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token attr-name",children:"d"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:7},this),(0,n.jsxDEV)(e.span,{className:"token attr-value",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation attr-equals",children:"="},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:76},this),(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:128},this),"M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:'"'},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:929},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:19,columnNumber:45},this),` `," ",(0,n.jsxDEV)(e.span,{className:"token punctuation",children:"/>"},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:20,columnNumber:5},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:17,columnNumber:5},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[" ",(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:21,columnNumber:105},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:21,columnNumber:3},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this),(0,n.jsxDEV)(e.div,{"data-line":"9",className:"highlight-line","data-highlighted":!0,children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token tag",children:[(0,n.jsxDEV)(e.span,{className:"token punctuation",children:""},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:22,columnNumber:105},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:22,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx"},this)]},void 0,!0,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:91,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/src/content/blog/_mdx_bundler_entry_point-ca8df0c6-2dc7-4768-91f4-1bea3f35bec7.mdx",lineNumber:91,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Let's add our styles to get the ripples animating in smooth way. To do this we can add a ",(0,n.jsxDEV)(e.code,{children:"

Tag: svelte

Animated SVG Water Pictorial Fraction in Svelte