var Component=(()=>{var ir=Object.create;var x=Object.defineProperty;var lr=Object.getOwnPropertyDescriptor;var sr=Object.getOwnPropertyNames;var cr=Object.getPrototypeOf,or=Object.prototype.hasOwnProperty;var la=(a,e)=>()=>(a&&(e=a(a=0)),e);var c=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),sa=(a,e)=>{for(var n in e)x(a,n,{get:e[n],enumerable:!0})},ca=(a,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of sr(e))!or.call(a,i)&&i!==n&&x(a,i,{get:()=>e[i],enumerable:!(r=lr(e,i))||r.enumerable});return a};var De=(a,e,n)=>(n=a!=null?ir(cr(a)):{},ca(e||!a||!a.__esModule?x(n,"default",{value:a,enumerable:!0}):n,a)),oa=a=>ca(x({},"__esModule",{value:!0}),a);var da=c((Io,ua)=>{ua.exports=_jsx_runtime});var d=c((Do,pa)=>{pa.exports=React});var ga=c(B=>{function Fe(a){return Fe=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},Fe(a)}Object.defineProperty(B,"__esModule",{value:!0});B.GeneralObserver=void 0;var C=ur(d());function fa(a){if(typeof WeakMap!="function")return null;var e=new WeakMap,n=new WeakMap;return(fa=function(i){return i?n:e})(a)}function ur(a,e){if(!e&&a&&a.__esModule)return a;if(a===null||Fe(a)!=="object"&&typeof a!="function")return{default:a};var n=fa(e);if(n&&n.has(a))return n.get(a);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in a)if(l!=="default"&&Object.prototype.hasOwnProperty.call(a,l)){var s=i?Object.getOwnPropertyDescriptor(a,l):null;s&&(s.get||s.set)?Object.defineProperty(r,l,s):r[l]=a[l]}return r.default=a,n&&n.set(a,r),r}function ha(a,e){return mr(a)||hr(a,e)||pr(a,e)||dr()}function dr(){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 pr(a,e){if(a){if(typeof a=="string")return ma(a,e);var n=Object.prototype.toString.call(a).slice(8,-1);if(n==="Object"&&a.constructor&&(n=a.constructor.name),n==="Map"||n==="Set")return Array.from(a);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ma(a,e)}}function ma(a,e){(e==null||e>a.length)&&(e=a.length);for(var n=0,r=new Array(e);n0&&(f(!0),r&&r())},{root:null,rootMargin:"400px",threshold:0});s&&s.current&&v.observe(s.current)},[s]),C.default.createElement("div",{ref:s,"data-testid":"general-observer",className:"mdx-embed"},p?n:C.default.createElement("div",{style:{height:l,width:"100%"}}))};B.GeneralObserver=fr});var m=c(We=>{Object.defineProperty(We,"__esModule",{value:!0});Object.defineProperty(We,"GeneralObserver",{enumerable:!0,get:function(){return gr.GeneralObserver}});var gr=ga()});var va=c(j=>{Object.defineProperty(j,"__esModule",{value:!0});j.AirtableBase=void 0;var Re=kr(d()),vr=m();function kr(a){return a&&a.__esModule?a:{default:a}}var Nr=function(e){var n=e.airtableBaseId,r=e.layout,i=r===void 0?"":r,l=e.viewControls,s=l===void 0?"on":l;return Re.default.createElement(vr.GeneralObserver,null,Re.default.createElement("div",{style:{position:"relative"}},Re.default.createElement("iframe",{"data-testid":"airtable-base",title:"airtable-".concat(n),src:"https://airtable.com/embed/".concat(n,"?backgroundColor=green&").concat(i?"layout=".concat(i,"&"):"","viewControls=").concat(s),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};j.AirtableBase=Nr});var ka=c(I=>{Object.defineProperty(I,"__esModule",{value:!0});I.AirtableForm=void 0;var Ae=yr(d()),wr=m();function yr(a){return a&&a.__esModule?a:{default:a}}var br=function(e){var n=e.airtableFormId;return Ae.default.createElement(wr.GeneralObserver,null,Ae.default.createElement("div",{style:{position:"relative"}},Ae.default.createElement("iframe",{"data-testid":"airtable-form",title:"airtable-".concat(n),src:"https://airtable.com/embed/".concat(n,"?backgroundColor=green"),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};I.AirtableForm=br});var $e=c(D=>{Object.defineProperty(D,"__esModule",{value:!0});Object.defineProperty(D,"AirtableBase",{enumerable:!0,get:function(){return _r.AirtableBase}});Object.defineProperty(D,"AirtableForm",{enumerable:!0,get:function(){return Or.AirtableForm}});var _r=va(),Or=ka()});var Na=c(F=>{Object.defineProperty(F,"__esModule",{value:!0});F.Buzzsprout=void 0;var ze=qr(d()),Pr=m();function qr(a){return a&&a.__esModule?a:{default:a}}var Tr=function(e){var n=e.buzzsproutId,r=e.width,i=r===void 0?"100%":r,l=e.height,s=l===void 0?"200":l,o=/^\d{7}\/\d{7}-[\w|\W]+/;return o.test(n)?ze.default.createElement(Pr.GeneralObserver,null,ze.default.createElement("div",{style:{position:"relative"}},ze.default.createElement("iframe",{"data-testid":"buzzsprout",className:"buzzsprout-mdx-embed",title:"buzzsprout-".concat(n),src:"https://www.buzzsprout.com/".concat(n,"?client_source=admin&iframe=true"),width:i,height:s,frameBorder:"0",scrolling:"no"}))):null};F.Buzzsprout=Tr});var He=c(Ge=>{Object.defineProperty(Ge,"__esModule",{value:!0});Object.defineProperty(Ge,"Buzzsprout",{enumerable:!0,get:function(){return Sr.Buzzsprout}});var Sr=Na()});var ya=c(W=>{Object.defineProperty(W,"__esModule",{value:!0});W.CodePen=void 0;var wa=Mr(d()),Er=m();function Mr(a){return a&&a.__esModule?a:{default:a}}var Cr=function(e){var n=e.codePenId,r=e.height,i=r===void 0?500:r,l=e.tabs,s=l===void 0?"result":l,o=e.clickToLoad,u=o===void 0?!1:o,p=e.editable,f=p===void 0?!1:p,v=e.theme,N=v===void 0?"default":v;return wa.default.createElement(Er.GeneralObserver,{height:i},wa.default.createElement("iframe",{"data-testid":"codepen",title:"codepen-".concat(n),className:"codepen-mdx-embed",height:i,style:{width:"100%"},scrolling:"no",src:"https://codepen.io/team/codepen/embed".concat(u?"/preview":"","/").concat(n,"?height=265&theme-id=").concat(N,"&default-tab=").concat(s).concat(f?"&editable=true":""),frameBorder:"no",allowFullScreen:!0}))};W.CodePen=Cr});var Ue=c(Ve=>{Object.defineProperty(Ve,"__esModule",{value:!0});Object.defineProperty(Ve,"CodePen",{enumerable:!0,get:function(){return Lr.CodePen}});var Lr=ya()});var _a=c(R=>{Object.defineProperty(R,"__esModule",{value:!0});R.CodeSandbox=void 0;var ba=Br(d()),xr=m();function Br(a){return a&&a.__esModule?a:{default:a}}var jr=function(e){var n=e.codeSandboxId;return ba.default.createElement(xr.GeneralObserver,null,ba.default.createElement("iframe",{"data-testid":"codesandbox",title:"codeSandbox-".concat(n),className:"codesandbox-mdx-embed",src:"https://codesandbox.io/embed/".concat(n),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"}}))};R.CodeSandbox=jr});var Ze=c(Xe=>{Object.defineProperty(Xe,"__esModule",{value:!0});Object.defineProperty(Xe,"CodeSandbox",{enumerable:!0,get:function(){return Ir.CodeSandbox}});var Ir=_a()});var g=c(k=>{Object.defineProperty(k,"__esModule",{value:!0});k.isEmptyString=k.getPadding=k.createStyleSheet=k.createScriptTag=void 0;var Dr=function(e){var n={"1:1":{paddingTop:"100%"},"16:9":{paddingTop:"56.25%"},"4:3":{paddingTop:"75%"},"3:2":{paddingTop:"66.66%"},"8.5":{paddingTop:"62.5%"}};return n[e]};k.getPadding=Dr;var Fr=function(e,n){var r=document.createElement("script");r.type="text/javascript",e&&(r.src=e),n&&(r.innerText=n),r.onerror=function(i){console.error("MDXEmbedProvider ".concat(i.type),i)},document.getElementsByTagName("head")[0].appendChild(r)};k.createScriptTag=Fr;var Wr=function(e){var n=document.createElement("link");n.type="text/css",n.rel="stylesheet",n.href=e,document.getElementsByTagName("head")[0].appendChild(n)};k.createStyleSheet=Wr;var Rr=function(e){return e==null||e.length===0};k.isEmptyString=Rr});var Pa=c(A=>{Object.defineProperty(A,"__esModule",{value:!0});A.EggheadLesson=void 0;var Ye=zr(d()),Ar=g(),$r=m();function zr(a){return a&&a.__esModule?a:{default:a}}function Oa(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Gr(a){for(var e=1;e{Object.defineProperty(Ke,"__esModule",{value:!0});Object.defineProperty(Ke,"EggheadLesson",{enumerable:!0,get:function(){return Ur.EggheadLesson}});var Ur=Pa()});var Sa=c(_=>{Object.defineProperty(_,"__esModule",{value:!0});_.handleFlickrLoad=_.flickrClassNames=void 0;var Xr=g(),qa=!1,Ta=[".flickr-embed"].join(",");_.flickrClassNames=Ta;var Zr="https://embedr.flickr.com/assets/client-code.js",Yr=function(){return document.querySelector(Ta)!==null&&!qa?((0,Xr.createScriptTag)(Zr,null),qa=!0,{status:"createScriptTag"}):{status:"null"}};_.handleFlickrLoad=Yr});var Ea=c($=>{Object.defineProperty($,"__esModule",{value:!0});$.Flickr=void 0;var Qe=Qr(d()),Kr=m(),Jr=Sa();function Qr(a){return a&&a.__esModule?a:{default:a}}var ei=function(e){var n=e.flickrLink;return Qe.default.createElement(Kr.GeneralObserver,{onEnter:function(){return(0,Jr.handleFlickrLoad)()}},Qe.default.createElement("span",{"data-testid":"flickr",className:"flickr-embed-mdx","data-flickr-embed":"true","data-header":"true","data-footer":"true"},Qe.default.createElement("img",{src:"https://live.staticflickr.com/".concat(n),width:"100%",height:"auto",alt:n})))};$.Flickr=ei});var tt=c(et=>{Object.defineProperty(et,"__esModule",{value:!0});Object.defineProperty(et,"Flickr",{enumerable:!0,get:function(){return ti.Flickr}});var ti=Ea()});var Ca=c(z=>{Object.defineProperty(z,"__esModule",{value:!0});z.Figma=void 0;var Ma=ni(d()),ai=m();function ni(a){return a&&a.__esModule?a:{default:a}}var ri=function(e){var n=e.title,r=e.height,i=r===void 0?450:r,l=e.url,s=/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;return s.test(l)?Ma.default.createElement(ai.GeneralObserver,{height:i},Ma.default.createElement("iframe",{"data-testid":"figma",title:"figma-".concat(n),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(l),frameBorder:"no",allowFullScreen:!0})):null};z.Figma=ri});var nt=c(at=>{Object.defineProperty(at,"__esModule",{value:!0});Object.defineProperty(at,"Figma",{enumerable:!0,get:function(){return ii.Figma}});var ii=Ca()});var ja=c(H=>{function rt(a){return rt=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},rt(a)}Object.defineProperty(H,"__esModule",{value:!0});H.Gist=void 0;var G=si(d()),La=g(),li=m();function Ba(a){if(typeof WeakMap!="function")return null;var e=new WeakMap,n=new WeakMap;return(Ba=function(i){return i?n:e})(a)}function si(a,e){if(!e&&a&&a.__esModule)return a;if(a===null||rt(a)!=="object"&&typeof a!="function")return{default:a};var n=Ba(e);if(n&&n.has(a))return n.get(a);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in a)if(l!=="default"&&Object.prototype.hasOwnProperty.call(a,l)){var s=i?Object.getOwnPropertyDescriptor(a,l):null;s&&(s.get||s.set)?Object.defineProperty(r,l,s):r[l]=a[l]}return r.default=a,n&&n.set(a,r),r}function ci(a,e){return pi(a)||di(a,e)||ui(a,e)||oi()}function oi(){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 ui(a,e){if(a){if(typeof a=="string")return xa(a,e);var n=Object.prototype.toString.call(a).slice(8,-1);if(n==="Object"&&a.constructor&&(n=a.constructor.name),n==="Map"||n==="Set")return Array.from(a);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return xa(a,e)}}function xa(a,e){(e==null||e>a.length)&&(e=a.length);for(var n=0,r=new Array(e);n{Object.defineProperty(it,"__esModule",{value:!0});Object.defineProperty(it,"Gist",{enumerable:!0,get:function(){return mi.Gist}});var mi=ja()});var Ia=c(U=>{Object.defineProperty(U,"__esModule",{value:!0});U.handleInstagrmLoad=void 0;var fi=g();function V(a){return V=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},V(a)}var gi="https://www.instagram.com/embed.js",vi=function(){V(window.instgrm)!=="undefined"&&window.instgrm.Embeds&&V(window.instgrm.Embeds.process)==="function"&&window.instgrm.Embeds.process()},ki=function(){return window.instgrm?(vi(),{status:"instgrmProcess"}):((0,fi.createScriptTag)(gi,null),{status:"createScriptTag"})};U.handleInstagrmLoad=ki});var Da=c(X=>{Object.defineProperty(X,"__esModule",{value:!0});X.Instagram=void 0;var st=yi(d()),Ni=m(),wi=Ia();function yi(a){return a&&a.__esModule?a:{default:a}}var bi=function(e){var n=e.instagramId;return st.default.createElement(Ni.GeneralObserver,{onEnter:function(){return(0,wi.handleInstagrmLoad)()}},st.default.createElement("blockquote",{"data-testid":"instagram",className:"instagram-media instagram-mdx-embed","data-instgrm-version":"12"},st.default.createElement("a",{href:"https://instagram.com/p/".concat(n)},typeof window<"u"&&!window.instgrm?"Loading":"")))};X.Instagram=bi});var ot=c(ct=>{Object.defineProperty(ct,"__esModule",{value:!0});Object.defineProperty(ct,"Instagram",{enumerable:!0,get:function(){return _i.Instagram}});var _i=Da()});var Wa=c(Z=>{Object.defineProperty(Z,"__esModule",{value:!0});Z.Lbry=void 0;var ut=qi(d()),Oi=g(),Pi=m();function qi(a){return a&&a.__esModule?a:{default:a}}function Fa(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Ti(a){for(var e=1;e{Object.defineProperty(dt,"__esModule",{value:!0});Object.defineProperty(dt,"Lbry",{enumerable:!0,get:function(){return Mi.Lbry}});var Mi=Wa()});var $a=c(O=>{Object.defineProperty(O,"__esModule",{value:!0});O.linkedInClassNames=O.handleLinkedInLoad=void 0;var Ci=g();function Y(a){return Y=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},Y(a)}var Ra=!1,Aa=[".LI-profile-badge",".LI-simple-link"].join(",");O.linkedInClassNames=Aa;var Li="https://platform.linkedin.com/badges/js/profile.js",xi=function(){Y(window.LI)!=="undefined"&&Y(window.LIRenderAll)==="function"&&window.LIRenderAll()},Bi=function(){return document.querySelector(Aa)!==null&&!Ra?((0,Ci.createScriptTag)(Li,null),Ra=!0,{status:"createScriptTag"}):(xi(),{status:"null"})};O.handleLinkedInLoad=Bi});var za=c(K=>{Object.defineProperty(K,"__esModule",{value:!0});K.LinkedInBadge=void 0;var ht=Di(d()),ji=m(),Ii=$a();function Di(a){return a&&a.__esModule?a:{default:a}}var Fi=function(e){var n=e.username,r=e.badgeType,i=r===void 0?"vertical":r,l=e.badgeSize,s=l===void 0?"medium":l,o=e.theme,u=o===void 0?"light":o,p=e.locale,f=p===void 0?"en_US":p;return ht.default.createElement(ji.GeneralObserver,{onEnter:function(){return(0,Ii.handleLinkedInLoad)()}},ht.default.createElement("div",{"data-testid":"linkedin-badge",className:"LI-profile-badge linkedin-badge-embed-mdx","data-version":"v1","data-size":s,"data-locale":f,"data-type":i,"data-theme":u,"data-vanity":n},ht.default.createElement("a",{className:"LI-simple-link",href:"https://uk.linkedin.com/in/".concat(n,"?trk=profile-badge")},"Loading")))};K.LinkedInBadge=Fi});var ft=c(mt=>{Object.defineProperty(mt,"__esModule",{value:!0});Object.defineProperty(mt,"LinkedInBadge",{enumerable:!0,get:function(){return Wi.LinkedInBadge}});var Wi=za()});var Q=c(P=>{Object.defineProperty(P,"__esModule",{value:!0});P.pinterestClassNames=P.handlePinterestBuild=void 0;var Ri=g();function J(a){return J=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},J(a)}var Ga=!1,Ha=[".pinterest-pin",".pinterest-board",".pinterest-follow-button"].join(",");P.pinterestClassNames=Ha;var Ai='!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"});',$i=function(){J(window.PinUtils)!=="undefined"&&window.PinUtils&&J(window.PinUtils.build)==="function"&&window.PinUtils.build()},zi=function(){return document.querySelector(Ha)!==null&&!Ga?((0,Ri.createScriptTag)(null,Ai),Ga=!0,{status:"createScriptTag"}):($i(),{status:"pinterestBuild"})};P.handlePinterestBuild=zi});var Ua=c(ee=>{Object.defineProperty(ee,"__esModule",{value:!0});ee.Pin=void 0;var Va=Vi(d()),Gi=m(),Hi=Q();function Vi(a){return a&&a.__esModule?a:{default:a}}var Ui=function(e){var n=e.pinId,r=e.size,i=r===void 0?"small":r;return Va.default.createElement(Gi.GeneralObserver,{onEnter:function(){return(0,Hi.handlePinterestBuild)()}},Va.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(n)}))};ee.Pin=Ui});var Za=c(te=>{Object.defineProperty(te,"__esModule",{value:!0});te.PinterestBoard=void 0;var Xa=Yi(d()),Xi=m(),Zi=Q();function Yi(a){return a&&a.__esModule?a:{default:a}}var Ki=function(e){var n=e.pinterestLink,r=e.width,i=r===void 0?400:r,l=e.height,s=l===void 0?250:l,o=e.imageWidth,u=o===void 0?80:o,p=e.variant,f=p===void 0?"board":p;return Xa.default.createElement(Xi.GeneralObserver,{onEnter:function(){return(0,Zi.handlePinterestBuild)()}},Xa.default.createElement("a",{className:"pinterest-board pinterest-board-mdx-embed","data-testid":"pinterest-board","data-pin-do":"embed".concat(f.charAt(0).toUpperCase()).concat(f.slice(1)),"data-pin-board-width":i,"data-pin-scale-height":s,"data-pin-scale-width":u,href:"https://www.pinterest.com/".concat(n)}))};te.PinterestBoard=Ki});var Ka=c(ae=>{Object.defineProperty(ae,"__esModule",{value:!0});ae.PinterestFollowButton=void 0;var Ya=el(d()),Ji=m(),Qi=Q();function el(a){return a&&a.__esModule?a:{default:a}}var tl=function(e){var n=e.username;return Ya.default.createElement(Ji.GeneralObserver,{onEnter:function(){return(0,Qi.handlePinterestBuild)()}},Ya.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(n,"/")},"Follow @".concat(n)))};ae.PinterestFollowButton=tl});var gt=c(L=>{Object.defineProperty(L,"__esModule",{value:!0});Object.defineProperty(L,"Pin",{enumerable:!0,get:function(){return al.Pin}});Object.defineProperty(L,"PinterestBoard",{enumerable:!0,get:function(){return nl.PinterestBoard}});Object.defineProperty(L,"PinterestFollowButton",{enumerable:!0,get:function(){return rl.PinterestFollowButton}});var al=Ua(),nl=Za(),rl=Ka()});var Qa=c(ne=>{Object.defineProperty(ne,"__esModule",{value:!0});ne.Replit=void 0;var Ja=ll(d()),il=m();function ll(a){return a&&a.__esModule?a:{default:a}}var sl=function(e){var n=e.repl,r=e.height,i=r===void 0?500:r,l=e.mode,s=l===void 0?"embed":l,o=n.startsWith("http")?n:"https://repl.it/".concat(n),u=s==="embed"?"?embed=true":"?lite=true";return Ja.default.createElement(il.GeneralObserver,{height:i},Ja.default.createElement("iframe",{"data-testid":"replit-"+s,frameBorder:"0",width:"100%",height:i,src:o+u}))};ne.Replit=sl});var kt=c(vt=>{Object.defineProperty(vt,"__esModule",{value:!0});Object.defineProperty(vt,"Replit",{enumerable:!0,get:function(){return cl.Replit}});var cl=Qa()});var en=c(re=>{Object.defineProperty(re,"__esModule",{value:!0});re.SimplecastEpisode=void 0;var Nt=ul(d()),ol=m();function ul(a){return a&&a.__esModule?a:{default:a}}var dl=function(e){var n=e.episodeId,r=e.theme,i=r===void 0?"light":r;return Nt.default.createElement(ol.GeneralObserver,null,Nt.default.createElement("div",{className:"simplecast-episode-mdx-embed",style:{position:"relative",height:"200px",width:"100%"}},Nt.default.createElement("iframe",{"data-testid":"simplecast-episode",title:"simplecast-".concat(n),src:"https://player.simplecast.com/".concat(n).concat(i==="dark"?"?dark=true":""),frameBorder:"no",scrolling:"no",seamless:!0,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}})))};re.SimplecastEpisode=dl});var yt=c(wt=>{Object.defineProperty(wt,"__esModule",{value:!0});Object.defineProperty(wt,"SimplecastEpisode",{enumerable:!0,get:function(){return pl.SimplecastEpisode}});var pl=en()});var an=c(ie=>{Object.defineProperty(ie,"__esModule",{value:!0});ie.SoundCloud=void 0;var tn=ml(d()),hl=m();function ml(a){return a&&a.__esModule?a:{default:a}}var fl=function(e){var n=e.soundCloudLink,r=e.width,i=r===void 0?"100%":r,l=e.height,s=l===void 0?"auto":l,o=e.autoPlay,u=o===void 0?!1:o,p=e.visual,f=p===void 0?!1:p,v=e.color;return tn.default.createElement(hl.GeneralObserver,null,tn.default.createElement("iframe",{"data-testid":"soundcloud",title:"sound-cloud-".concat(n),className:"soundcloud-mdx-embed",width:i,height:s,scrolling:"no",frameBorder:"no",allow:"autoplay",src:"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/".concat(n,"&color=%23").concat(v,"&auto_play=").concat(u,"&visual=").concat(f)}))};ie.SoundCloud=fl});var _t=c(bt=>{Object.defineProperty(bt,"__esModule",{value:!0});Object.defineProperty(bt,"SoundCloud",{enumerable:!0,get:function(){return gl.SoundCloud}});var gl=an()});var rn=c(le=>{Object.defineProperty(le,"__esModule",{value:!0});le.Spotify=void 0;var nn=kl(d()),vl=m();function kl(a){return a&&a.__esModule?a:{default:a}}var Nl=function(e){var n=e.spotifyLink,r=e.width,i=r===void 0?320:r,l=e.height,s=l===void 0?380:l;return nn.default.createElement(vl.GeneralObserver,null,nn.default.createElement("iframe",{"data-testid":"spotify",title:"spotify-".concat(n),className:"spotify-mdx-embed",src:"https://open.spotify.com/embed/".concat(n),width:i,height:s,frameBorder:"0",allow:"encrypted-media"}))};le.Spotify=Nl});var Pt=c(Ot=>{Object.defineProperty(Ot,"__esModule",{value:!0});Object.defineProperty(Ot,"Spotify",{enumerable:!0,get:function(){return wl.Spotify}});var wl=rn()});var ln=c(se=>{Object.defineProperty(se,"__esModule",{value:!0});se.Strava=void 0;var qt=bl(d()),yl=m();function bl(a){return a&&a.__esModule?a:{default:a}}var _l=function(e){var n=e.activityId;return qt.default.createElement(yl.GeneralObserver,null,qt.default.createElement("div",{"data-testid":"strava",className:"strava-mdx-embed",style:{position:"relative",height:"350px",maxWidth:"568px",width:"100%",overflow:"auto"}},qt.default.createElement("iframe",{title:"strava-".concat(n),className:"strava-mdx-embed",height:"100%",width:"100%",style:{minWidth:"380px"},frameBorder:"0",scrolling:"no",src:"https://www.strava.com/activities/".concat(n)})))};se.Strava=_l});var St=c(Tt=>{Object.defineProperty(Tt,"__esModule",{value:!0});Object.defineProperty(Tt,"Strava",{enumerable:!0,get:function(){return Ol.Strava}});var Ol=ln()});var cn=c(ce=>{Object.defineProperty(ce,"__esModule",{value:!0});ce.Snack=void 0;var sn=Tl(d()),Pl=g(),ql=m();function Tl(a){return a&&a.__esModule?a:{default:a}}var Sl="https://snack.expo.io/embed.js",El=function(e){var n=e.snackId,r=e.platform,i=r===void 0?"web":r,l=e.theme,s=l===void 0?"light":l,o=function(){(0,Pl.createScriptTag)(Sl,null)};return sn.default.createElement(ql.GeneralObserver,{onEnter:o},sn.default.createElement("div",{className:"snack-mdx-embed","data-testid":"snack","data-snack-id":n,"data-snack-platform":i,"data-snack-preview":"true","data-snack-theme":s,style:{overflow:"hidden",background:"#F9F9F9",border:"1px solid var(--color-border)",borderRadius:"4px",height:"505px",width:"100%"}}))};ce.Snack=El});var Mt=c(Et=>{Object.defineProperty(Et,"__esModule",{value:!0});Object.defineProperty(Et,"Snack",{enumerable:!0,get:function(){return Ml.Snack}});var Ml=cn()});var un=c(q=>{Object.defineProperty(q,"__esModule",{value:!0});q.tikTokClassNames=q.handleTikTokLoad=void 0;var Cl=g(),on=!1,Ll=".tiktok-embed";q.tikTokClassNames=Ll;var xl="https://www.tiktok.com/embed.js",Bl=function(){return on?{status:"null"}:((0,Cl.createScriptTag)(xl,null),on=!0,{status:"createScriptTag"})};q.handleTikTokLoad=Bl});var dn=c(ue=>{Object.defineProperty(ue,"__esModule",{value:!0});ue.TikTok=void 0;var oe=Dl(d()),jl=m(),Il=un();function Dl(a){return a&&a.__esModule?a:{default:a}}var Fl=function(e){var n=e.tikTokId;return n?oe.default.createElement(jl.GeneralObserver,{onEnter:function(){return(0,Il.handleTikTokLoad)()}},oe.default.createElement("blockquote",{"data-testid":"tiktok",className:"tiktok-embed",cite:"https://www.tiktok.com/".concat(n),"data-video-id":n.split("/").pop()},oe.default.createElement("section",null,oe.default.createElement("a",{href:"https://tiktok.com/".concat(n)},typeof window<"u"&&!window.tiktok?"Loading":"")))):null};ue.TikTok=Fl});var Lt=c(Ct=>{Object.defineProperty(Ct,"__esModule",{value:!0});Object.defineProperty(Ct,"TikTok",{enumerable:!0,get:function(){return Wl.TikTok}});var Wl=dn()});var hn=c(xt=>{Object.defineProperty(xt,"__esModule",{value:!0});xt.constructTwitchURL=Rl;var pn=g();function Rl(a,e,n,r){var i=[r];return a!==void 0?i.push("&video=v".concat(a)):(0,pn.isEmptyString)(e)?(0,pn.isEmptyString)(n)||i.push("&collection=".concat(n)):i.push("&channel=".concat(e)),i.join("")}});var fn=c(de=>{Object.defineProperty(de,"__esModule",{value:!0});de.Twitch=void 0;var Bt=Gl(d()),Al=g(),$l=m(),zl=hn();function Gl(a){return a&&a.__esModule?a:{default:a}}function mn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Hl(a){for(var e=1;e{Object.defineProperty(jt,"__esModule",{value:!0});Object.defineProperty(jt,"Twitch",{enumerable:!0,get:function(){return Xl.Twitch}});var Xl=fn()});var b=c(he=>{Object.defineProperty(he,"__esModule",{value:!0});he.handleTwttrLoad=void 0;var Zl=g();function pe(a){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(a)}var Yl=` !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") `,Kl=function(){pe(window.twttr)!=="undefined"&&window.twttr.widgets&&pe(window.twttr.widgets.load)==="function"&&window.twttr.widgets.load(document.getElementsByClassName("mdx-embed"))},Jl=function(){return window.twttr?(Kl(),{status:"twttrLoad"}):((0,Zl.createScriptTag)(null,Yl),{status:"createScriptTag"})};he.handleTwttrLoad=Jl});var gn=c(fe=>{Object.defineProperty(fe,"__esModule",{value:!0});fe.Tweet=void 0;var me=ts(d()),Ql=m(),es=b();function ts(a){return a&&a.__esModule?a:{default:a}}var as=function(e){var n=e.tweetLink,r=e.theme,i=r===void 0?"light":r,l=e.align,s=l===void 0?"left":l,o=e.hideConversation,u=o===void 0?!1:o;return me.default.createElement(Ql.GeneralObserver,{onEnter:function(){return(0,es.handleTwttrLoad)()}},me.default.createElement("div",{"data-testid":"twitter-tweet",className:"twitter-tweet-mdx-embed",style:{overflow:"auto"}},me.default.createElement("blockquote",{className:"twitter-tweet","data-theme":i,"data-align":s,"data-conversation":u?"none":""},me.default.createElement("a",{href:"https://twitter.com/".concat(n,"?ref_src=twsrc%5Etfw")},typeof window<"u"&&!window.twttr?"Loading":""))))};fe.Tweet=as});var kn=c(ge=>{Object.defineProperty(ge,"__esModule",{value:!0});ge.TwitterFollowButton=void 0;var vn=is(d()),ns=m(),rs=b();function is(a){return a&&a.__esModule?a:{default:a}}var ls=function(e){var n=e.username,r=e.showFollowers,i=r===void 0?!1:r,l=e.showUsername,s=l===void 0?!0:l,o=e.size,u=o===void 0?"small":o;return vn.default.createElement(ns.GeneralObserver,{onEnter:function(){return(0,rs.handleTwttrLoad)()}},vn.default.createElement("a",{"data-testid":"twitter-follow-button",href:"https://twitter.com/".concat(n,"?ref_src=twsrc%5Etfw"),className:"twitter-follow-button twitter-follow-button-mdx-embed","data-show-count":i,"data-show-screen-name":s,"data-size":u},"Follow @".concat(n)))};ge.TwitterFollowButton=ls});var wn=c(ve=>{Object.defineProperty(ve,"__esModule",{value:!0});ve.TwitterHashtagButton=void 0;var Nn=os(d()),ss=m(),cs=b();function os(a){return a&&a.__esModule?a:{default:a}}var us=function(e){var n=e.hashtag,r=e.size,i=r===void 0?"small":r;return Nn.default.createElement(ss.GeneralObserver,{onEnter:function(){return(0,cs.handleTwttrLoad)()}},Nn.default.createElement("a",{"data-testid":"twitter-hashtag-button",href:"https://twitter.com/intent/tweet?button_hashtag=".concat(n,"&ref_src=twsrc%5Etfw"),className:"twitter-hashtag-button twitter-hashtag-button-mdx-embed","data-size":i},"Tweet #".concat(n)))};ve.TwitterHashtagButton=us});var yn=c(ke=>{Object.defineProperty(ke,"__esModule",{value:!0});ke.TwitterList=void 0;var Dt=hs(d()),ds=m(),ps=b();function hs(a){return a&&a.__esModule?a:{default:a}}var ms=function(e){var n=e.username,r=e.theme,i=r===void 0?"light":r,l=e.listName,s=e.width,o=s===void 0?"498px":s,u=e.height,p=u===void 0?null:u;return Dt.default.createElement(ds.GeneralObserver,{onEnter:function(){return(0,ps.handleTwttrLoad)()}},Dt.default.createElement("div",{style:{overflow:"auto"}},Dt.default.createElement("a",{"data-testid":"twitter-list",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":o,"data-height":p,href:"https://twitter.com/".concat(n,"/lists/").concat(l,"?ref_src=twsrc%5Etfw")},"A Twitter List by @".concat(n))))};ke.TwitterList=ms});var _n=c(Ne=>{Object.defineProperty(Ne,"__esModule",{value:!0});Ne.TwitterMentionButton=void 0;var bn=vs(d()),fs=m(),gs=b();function vs(a){return a&&a.__esModule?a:{default:a}}var ks=function(e){var n=e.username,r=e.size,i=r===void 0?"small":r;return bn.default.createElement(fs.GeneralObserver,{onEnter:function(){return(0,gs.handleTwttrLoad)()}},bn.default.createElement("a",{"data-testid":"twitter-mention-button",href:"https://twitter.com/intent/tweet?screen_name=".concat(n,"&ref_src=twsrc%5Etfw"),className:"twitter-mention-button twitter-mention-button-mdx-embed","data-size":i},"Tweet to @".concat(n)))};Ne.TwitterMentionButton=ks});var On=c(we=>{Object.defineProperty(we,"__esModule",{value:!0});we.TwitterTimeline=void 0;var Ft=ys(d()),Ns=m(),ws=b();function ys(a){return a&&a.__esModule?a:{default:a}}var bs=function(e){var n=e.username,r=e.theme,i=r===void 0?"light":r,l=e.showLikes,s=l===void 0?null:l,o=e.width,u=o===void 0?"498px":o,p=e.height,f=p===void 0?null:p;return Ft.default.createElement(Ns.GeneralObserver,{onEnter:function(){return(0,ws.handleTwttrLoad)()}},Ft.default.createElement("div",{style:{overflow:"auto"}},Ft.default.createElement("a",{"data-testid":"twitter-timeline",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":u,"data-height":f,href:"https://twitter.com/".concat(n).concat(s?"/likes":"","?ref_src=twsrc%5Etfw")},"Tweets by @".concat(n))))};we.TwitterTimeline=bs});var Wt=c(y=>{Object.defineProperty(y,"__esModule",{value:!0});Object.defineProperty(y,"Tweet",{enumerable:!0,get:function(){return _s.Tweet}});Object.defineProperty(y,"TwitterFollowButton",{enumerable:!0,get:function(){return Os.TwitterFollowButton}});Object.defineProperty(y,"TwitterHashtagButton",{enumerable:!0,get:function(){return Ps.TwitterHashtagButton}});Object.defineProperty(y,"TwitterList",{enumerable:!0,get:function(){return qs.TwitterList}});Object.defineProperty(y,"TwitterMentionButton",{enumerable:!0,get:function(){return Ts.TwitterMentionButton}});Object.defineProperty(y,"TwitterTimeline",{enumerable:!0,get:function(){return Ss.TwitterTimeline}});var _s=gn(),Os=kn(),Ps=wn(),qs=yn(),Ts=_n(),Ss=On()});var qn=c(ye=>{Object.defineProperty(ye,"__esModule",{value:!0});ye.Vimeo=void 0;var Rt=Cs(d()),Es=g(),Ms=m();function Cs(a){return a&&a.__esModule?a:{default:a}}function Pn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Ls(a){for(var e=1;e{Object.defineProperty(At,"__esModule",{value:!0});Object.defineProperty(At,"Vimeo",{enumerable:!0,get:function(){return js.Vimeo}});var js=qn()});var En=c(be=>{Object.defineProperty(be,"__esModule",{value:!0});be.Whimsical=void 0;var zt=Ds(d()),Is=m();function Ds(a){return a&&a.__esModule?a:{default:a}}function Tn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Fs(a){for(var e=1;ea.length)&&(e=a.length);for(var n=0,r=new Array(e);n{Object.defineProperty(Gt,"__esModule",{value:!0});Object.defineProperty(Gt,"Whimsical",{enumerable:!0,get:function(){return Us.Whimsical}});var Us=En()});var Ln=c(Oe=>{function Vt(a){return Vt=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},Vt(a)}Object.defineProperty(Oe,"__esModule",{value:!0});Oe.Wikipedia=void 0;var _e=Zs(d()),Xs=m();function Cn(a){if(typeof WeakMap!="function")return null;var e=new WeakMap,n=new WeakMap;return(Cn=function(i){return i?n:e})(a)}function Zs(a,e){if(!e&&a&&a.__esModule)return a;if(a===null||Vt(a)!=="object"&&typeof a!="function")return{default:a};var n=Cn(e);if(n&&n.has(a))return n.get(a);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in a)if(l!=="default"&&Object.prototype.hasOwnProperty.call(a,l)){var s=i?Object.getOwnPropertyDescriptor(a,l):null;s&&(s.get||s.set)?Object.defineProperty(r,l,s):r[l]=a[l]}return r.default=a,n&&n.set(a,r),r}function Ys(a,e){return ec(a)||Qs(a,e)||Js(a,e)||Ks()}function Ks(){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 Js(a,e){if(a){if(typeof a=="string")return Mn(a,e);var n=Object.prototype.toString.call(a).slice(8,-1);if(n==="Object"&&a.constructor&&(n=a.constructor.name),n==="Map"||n==="Set")return Array.from(a);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Mn(a,e)}}function Mn(a,e){(e==null||e>a.length)&&(e=a.length);for(var n=0,r=new Array(e);n{Object.defineProperty(Ut,"__esModule",{value:!0});Object.defineProperty(Ut,"Wikipedia",{enumerable:!0,get:function(){return ac.Wikipedia}});var ac=Ln()});var Bn=c(Pe=>{Object.defineProperty(Pe,"__esModule",{value:!0});Pe.handleWistiaLoad=void 0;var nc=g(),xn=!1,rc="https://fast.wistia.net/assets/external/E-v1.js",ic=function(){xn||((0,nc.createScriptTag)(rc,null),xn=!0)};Pe.handleWistiaLoad=ic});var Dn=c(Te=>{function Zt(a){return Zt=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},Zt(a)}Object.defineProperty(Te,"__esModule",{value:!0});Te.Wistia=void 0;var qe=oc(d()),lc=g(),sc=m(),cc=Bn();function In(a){if(typeof WeakMap!="function")return null;var e=new WeakMap,n=new WeakMap;return(In=function(i){return i?n:e})(a)}function oc(a,e){if(!e&&a&&a.__esModule)return a;if(a===null||Zt(a)!=="object"&&typeof a!="function")return{default:a};var n=In(e);if(n&&n.has(a))return n.get(a);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in a)if(l!=="default"&&Object.prototype.hasOwnProperty.call(a,l)){var s=i?Object.getOwnPropertyDescriptor(a,l):null;s&&(s.get||s.set)?Object.defineProperty(r,l,s):r[l]=a[l]}return r.default=a,n&&n.set(a,r),r}function jn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function uc(a){for(var e=1;e0?"?"+w.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:u,height:f}})))};Te.Wistia=pc});var Kt=c(Yt=>{Object.defineProperty(Yt,"__esModule",{value:!0});Object.defineProperty(Yt,"Wistia",{enumerable:!0,get:function(){return hc.Wistia}});var hc=Dn()});var Wn=c(Se=>{Object.defineProperty(Se,"__esModule",{value:!0});Se.YouTube=void 0;var Jt=gc(d()),mc=g(),fc=m();function gc(a){return a&&a.__esModule?a:{default:a}}function Fn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function vc(a){for(var e=1;e{Object.defineProperty(Qt,"__esModule",{value:!0});Object.defineProperty(Qt,"YouTube",{enumerable:!0,get:function(){return wc.YouTube}});var wc=Wn()});function Rn(a){return e;function e(n){let r=Me(n.components);return T.default.createElement(a,{...n,allComponents:r})}}function Me(a){let e=T.default.useContext(Ee);return T.default.useMemo(()=>typeof a=="function"?a(e):{...e,...a},[e,a])}function An({components:a,children:e,disableParentContext:n}){let r;return n?r=typeof a=="function"?a({}):a||yc:r=Me(a),T.default.createElement(Ee.Provider,{value:r},e)}var T,Ee,yc,$n=la(()=>{T=De(d(),1),Ee=T.default.createContext({});yc={}});var zn={};sa(zn,{MDXContext:()=>Ee,MDXProvider:()=>An,useMDXComponents:()=>Me,withMDXComponents:()=>Rn});var Gn=la(()=>{$n()});var Vn=c(Ce=>{Object.defineProperty(Ce,"__esModule",{value:!0});Ce.Cinnamon=void 0;var ta=Oc(d()),bc=g(),_c=m();function Oc(a){return a&&a.__esModule?a:{default:a}}function Hn(a,e){var n=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);e&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(a,i).enumerable})),n.push.apply(n,r)}return n}function Pc(a){for(var e=1;e{Object.defineProperty(aa,"__esModule",{value:!0});Object.defineProperty(aa,"Cinnamon",{enumerable:!0,get:function(){return Sc.Cinnamon}});var Sc=Vn()});var Zn=c(Le=>{Object.defineProperty(Le,"__esModule",{value:!0});Le.components=void 0;var Xn=$e(),Ec=He(),Mc=Un(),Cc=Ue(),Lc=Ze(),xc=Je(),Bc=nt(),jc=tt(),Ic=lt(),Dc=ot(),Fc=pt(),Wc=ft(),na=gt(),Rc=kt(),Ac=yt(),$c=_t(),zc=Pt(),Gc=St(),Hc=Mt(),Vc=Lt(),Uc=It(),S=Wt(),Xc=$t(),Zc=Ht(),Yc=Xt(),Kc=Kt(),Jc=ea(),Qc={AirtableBase:Xn.AirtableBase,AirtableForm:Xn.AirtableForm,Buzzsprout:Ec.Buzzsprout,Cinnamon:Mc.Cinnamon,CodePen:Cc.CodePen,CodeSandbox:Lc.CodeSandbox,EggheadLesson:xc.EggheadLesson,Figma:Bc.Figma,Flickr:jc.Flickr,Gist:Ic.Gist,Instagram:Dc.Instagram,Lbry:Fc.Lbry,LinkedInBadge:Wc.LinkedInBadge,Pin:na.Pin,PinterestBoard:na.PinterestBoard,PinterestFollowButton:na.PinterestFollowButton,Replit:Rc.Replit,SimplecastEpisode:Ac.SimplecastEpisode,SoundCloud:$c.SoundCloud,Spotify:zc.Spotify,Strava:Gc.Strava,Snack:Hc.Snack,TikTok:Vc.TikTok,Twitch:Uc.Twitch,Tweet:S.Tweet,TwitterFollowButton:S.TwitterFollowButton,TwitterHashtagButton:S.TwitterHashtagButton,TwitterList:S.TwitterList,TwitterMentionButton:S.TwitterMentionButton,TwitterTimeline:S.TwitterTimeline,Vimeo:Xc.Vimeo,Whimsical:Zc.Whimsical,Wikipedia:Yc.Wikipedia,Wistia:Kc.Wistia,YouTube:Jc.YouTube};Le.components=Qc});var Yn=c(xe=>{Object.defineProperty(xe,"__esModule",{value:!0});xe.MDXEmbedProvider=void 0;var eo=no(d()),to=(Gn(),oa(zn)),ao=Zn();function no(a){return a&&a.__esModule?a:{default:a}}var ro=function(e){var n=e.children;return eo.default.createElement(to.MDXProvider,{components:ao.components},n)};xe.MDXEmbedProvider=ro});var Kn=c(ra=>{Object.defineProperty(ra,"__esModule",{value:!0});Object.defineProperty(ra,"MDXEmbedProvider",{enumerable:!0,get:function(){return io.MDXEmbedProvider}});var io=Yn()});var Qn=c(h=>{Object.defineProperty(h,"__esModule",{value:!0});Object.defineProperty(h,"AirtableBase",{enumerable:!0,get:function(){return Jn.AirtableBase}});Object.defineProperty(h,"AirtableForm",{enumerable:!0,get:function(){return Jn.AirtableForm}});Object.defineProperty(h,"Buzzsprout",{enumerable:!0,get:function(){return lo.Buzzsprout}});Object.defineProperty(h,"CodePen",{enumerable:!0,get:function(){return so.CodePen}});Object.defineProperty(h,"CodeSandbox",{enumerable:!0,get:function(){return co.CodeSandbox}});Object.defineProperty(h,"EggheadLesson",{enumerable:!0,get:function(){return oo.EggheadLesson}});Object.defineProperty(h,"Figma",{enumerable:!0,get:function(){return po.Figma}});Object.defineProperty(h,"Flickr",{enumerable:!0,get:function(){return uo.Flickr}});Object.defineProperty(h,"Gist",{enumerable:!0,get:function(){return ho.Gist}});Object.defineProperty(h,"Instagram",{enumerable:!0,get:function(){return mo.Instagram}});Object.defineProperty(h,"Lbry",{enumerable:!0,get:function(){return fo.Lbry}});Object.defineProperty(h,"LinkedInBadge",{enumerable:!0,get:function(){return go.LinkedInBadge}});Object.defineProperty(h,"MDXEmbedProvider",{enumerable:!0,get:function(){return Mo.MDXEmbedProvider}});Object.defineProperty(h,"Pin",{enumerable:!0,get:function(){return ia.Pin}});Object.defineProperty(h,"PinterestBoard",{enumerable:!0,get:function(){return ia.PinterestBoard}});Object.defineProperty(h,"PinterestFollowButton",{enumerable:!0,get:function(){return ia.PinterestFollowButton}});Object.defineProperty(h,"Replit",{enumerable:!0,get:function(){return vo.Replit}});Object.defineProperty(h,"SimplecastEpisode",{enumerable:!0,get:function(){return ko.SimplecastEpisode}});Object.defineProperty(h,"Snack",{enumerable:!0,get:function(){return bo.Snack}});Object.defineProperty(h,"SoundCloud",{enumerable:!0,get:function(){return No.SoundCloud}});Object.defineProperty(h,"Spotify",{enumerable:!0,get:function(){return wo.Spotify}});Object.defineProperty(h,"Strava",{enumerable:!0,get:function(){return yo.Strava}});Object.defineProperty(h,"TikTok",{enumerable:!0,get:function(){return _o.TikTok}});Object.defineProperty(h,"Tweet",{enumerable:!0,get:function(){return E.Tweet}});Object.defineProperty(h,"Twitch",{enumerable:!0,get:function(){return Oo.Twitch}});Object.defineProperty(h,"TwitterFollowButton",{enumerable:!0,get:function(){return E.TwitterFollowButton}});Object.defineProperty(h,"TwitterHashtagButton",{enumerable:!0,get:function(){return E.TwitterHashtagButton}});Object.defineProperty(h,"TwitterList",{enumerable:!0,get:function(){return E.TwitterList}});Object.defineProperty(h,"TwitterMentionButton",{enumerable:!0,get:function(){return E.TwitterMentionButton}});Object.defineProperty(h,"TwitterTimeline",{enumerable:!0,get:function(){return E.TwitterTimeline}});Object.defineProperty(h,"Vimeo",{enumerable:!0,get:function(){return Po.Vimeo}});Object.defineProperty(h,"Whimsical",{enumerable:!0,get:function(){return qo.Whimsical}});Object.defineProperty(h,"Wikipedia",{enumerable:!0,get:function(){return To.Wikipedia}});Object.defineProperty(h,"Wistia",{enumerable:!0,get:function(){return So.Wistia}});Object.defineProperty(h,"YouTube",{enumerable:!0,get:function(){return Eo.YouTube}});var Jn=$e(),lo=He(),so=Ue(),co=Ze(),oo=Je(),uo=tt(),po=nt(),ho=lt(),mo=ot(),fo=pt(),go=ft(),ia=gt(),vo=kt(),ko=yt(),No=_t(),wo=Pt(),yo=St(),bo=Mt(),_o=Lt(),Oo=It(),E=Wt(),Po=$t(),qo=Ht(),To=Xt(),So=Kt(),Eo=ea(),Mo=Kn()});var Bo={};sa(Bo,{default:()=>xo,frontmatter:()=>Co});var t=De(da()),tr=De(Qn()),Co={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 er(a){let e=Object.assign({h2:"h2",ul:"ul",li:"li",a:"a",p:"p",code:"code",pre:"pre",div:"div",span:"span"},a.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:"table-of-contents",children:"Table of Contents"}),` `,(0,t.jsxs)(e.ul,{children:[` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#what-were-building",children:"What We're Building"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#why-sveltejs",children:"Why Svelte.js?"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#the-pieces",children:"The Pieces"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#fill-area",children:"Fill Area"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#mask-area",children:"Mask Area"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#fill",children:"Fill"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#using-the-component",children:"Using the component"})}),` `,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:"#conclusion",children:"Conclusion"})}),` `]}),` `,(0,t.jsx)(e.h2,{id:"what-were-building",children:"What We're Building"}),` `,(0,t.jsx)(tr.CodeSandbox,{codeSandboxId:"svelte-svg-pictorial-fraction-f1hv2"}),` `,(0,t.jsx)(e.h2,{id:"why-sveltejs",children:"Why Svelte.js?"}),` `,(0,t.jsxs)(e.p,{children:["I've been excited to check out ",(0,t.jsx)(e.a,{href:"https://svelte.dev/",rel:"nofollow",children:"svelte.js"})," 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."]}),` `,(0,t.jsx)(e.h2,{id:"the-pieces",children:"The Pieces"}),` `,(0,t.jsx)(e.p,{children:"The pictorial fraction is a combination of svg pieces that come together to show and mask elements."}),` `,(0,t.jsx)(e.h2,{id:"fill-area",children:"Fill Area"}),` `,(0,t.jsxs)(e.p,{children:["Let's create a new file and call it ",(0,t.jsx)(e.code,{children:"PictorialFraction.svelte"}),". 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."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsxs)(e.code,{className:"hljs language-html",filename:"PictorialFraction.svelte",children:[(0,t.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"264.5",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"264.5",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"rect"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"264.5",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"264.5",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"#ff9900",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,t.jsx)(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."}),` `,(0,t.jsx)(e.pre,Object.assign({"1-4":""},{"6-7":""},{children:(0,t.jsxs)(e.code,Object.assign({className:"hljs language-html"},{"1-4":""},{"6-7":""},{children:[(0,t.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"script"]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,t.jsx)(e.span,{className:"token script",children:(0,t.jsxs)(e.span,{className:"token language-javascript",children:[` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," width",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," height",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})}),(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,t.jsx)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,t.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"rect"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"#ff9900",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]}))})),` `,(0,t.jsxs)(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,t.jsx)(e.code,{children:""})," we can use ",(0,t.jsx)(e.code,{children:""}),"."]}),` `,(0,t.jsxs)(e.p,{children:["Let's position the rectangle using ",(0,t.jsx)(e.code,{children:"transform: translate(0, 20px);"}),". This should allow us to ",(0,t.jsx)(e.code,{children:"slide"})," 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,t.jsx)(e.code,{children:"transform"})," attribute on ",(0,t.jsx)(e.code,{children:"rect"})," because Safari doesn't animate the attribute in the same way Chrome and Firefox do, making it choppy."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsxs)(e.code,{className:"hljs language-html",line:"7",children:[(0,t.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"script"]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,t.jsx)(e.span,{className:"token script",children:(0,t.jsxs)(e.span,{className:"token language-javascript",children:[` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," width",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," height",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})}),(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,t.jsx)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,t.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"rect"]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsxs)(e.span,{className:"token special-attr",children:[(0,t.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),(0,t.jsxs)(e.span,{className:"token value css language-css",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"{"}),"`",(0,t.jsx)(e.span,{className:"token property",children:"transform"}),(0,t.jsx)(e.span,{className:"token punctuation",children:":"})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"translate(0,"}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"20px);`}"}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"#ff9900",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,t.jsxs)(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,t.jsx)(e.code,{children:"path"})," element and animate it with css."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"hljs language-html",children:(0,t.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"water",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"d"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"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,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `,(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]})})}),` `,(0,t.jsxs)(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,t.jsx)(e.code,{children:"path"})," in group that's positioned based on ",(0,t.jsx)(e.code,{children:"rect"}),"'s y position."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsxs)(e.code,{className:"hljs language-html",line:"9-11",children:[(0,t.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"script"]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,t.jsx)(e.span,{className:"token script",children:(0,t.jsxs)(e.span,{className:"token language-javascript",children:[` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," width",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `," ",(0,t.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,t.jsx)(e.span,{className:"token keyword",children:"let"})," height",(0,t.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})}),(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,t.jsx)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,t.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"rect"]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{width}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"{height}",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsxs)(e.span,{className:"token special-attr",children:[(0,t.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),(0,t.jsxs)(e.span,{className:"token value css language-css",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"{"}),"`",(0,t.jsx)(e.span,{className:"token property",children:"transform"}),(0,t.jsx)(e.span,{className:"token punctuation",children:":"})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"translate(0,"}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"20px);`}"}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"#ff9900",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,t.jsx)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:` `}),(0,t.jsxs)(e.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"g"]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"water-container",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsxs)(e.span,{className:"token special-attr",children:[(0,t.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),(0,t.jsxs)(e.span,{className:"token value css language-css",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"{"}),"`",(0,t.jsx)(e.span,{className:"token property",children:"transform"}),(0,t.jsx)(e.span,{className:"token punctuation",children:":"})]}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]})]})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"translate(0,"})," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"0);`}"}),(0,t.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"water",(0,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token attr-name",children:"d"}),(0,t.jsxs)(e.span,{className:"token attr-value",children:[(0,t.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(e.span,{className:"token punctuation",children:'"'}),"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,t.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `," ",(0,t.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[" ",(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,t.jsxs)(e.div,{"data-line":"9",className:"highlight-line","data-highlighted":!0,children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsxs)(e.span,{className:"token tag",children:[(0,t.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,t.jsxs)(e.p,{children:["Let's add our styles to get the ripples animating in smooth way. To do this we can add a ",(0,t.jsx)(e.code,{children:"

Tag: svelte

Animated SVG Water Pictorial Fraction in Svelte