(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[52148],{21894:(s,e,a)=>{"use strict";a.d(e,{A:()=>m});var n=a(87687);a(52751);var l=a(31928);let t=(0,l.I)("div")({name:"Graph",class:"g1oooq75",propsAsIs:!1}),c=(0,l.I)("div")({name:"Axes",class:"a1m5d84d",propsAsIs:!1}),o=(0,l.I)("div")({name:"VerticalTicks",class:"v1lpa6qu",propsAsIs:!1}),r=(0,l.I)("div")({name:"Label",class:"lox4ews",propsAsIs:!1}),i=(0,l.I)(r)({name:"OpacityLabel",class:"oeqdvn3",propsAsIs:!0}),p=(0,l.I)(r)({name:"TimeLabel",class:"t69nftb",propsAsIs:!0}),d=(0,l.I)("div")({name:"Item",class:"i1w98lv0",propsAsIs:!1}),v=(0,l.I)("div")({name:"VerticalTick",class:"v1x92m40",propsAsIs:!1}),u=(0,l.I)("div")({name:"TickLabel",class:"t1sb0agw",propsAsIs:!1}),m=function(s){let{children:e,...a}=s;return(0,n.jsxs)(t,{...a,children:[(0,n.jsx)(c,{}),(0,n.jsx)(i,{children:"Opacity"}),(0,n.jsx)(p,{children:"Time"}),(0,n.jsx)(o,{children:["0","0.25","0.5","0.75","1"].map(s=>(0,n.jsxs)(d,{children:[(0,n.jsx)(v,{}),(0,n.jsx)(u,{children:s})]},s))}),e]})};a(60740)},52148:(s,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>I});var n=a(87687),l=a(52751),t=a(31928),c=a(30251),o=a(68852),r=a(64075),i=a(60671),p=a(21894);let d={startPoint:[0,0],controlPoint1:[131.25,0],controlPoint2:[243.75,150],endPoint:[375,150]},v=(0,t.I)(r.A)({name:"Wrapper",class:"w166ck7h",propsAsIs:!0}),u=(0,t.I)(p.A)({name:"StyledKeyframeGraph",class:"s1u4odpn",propsAsIs:!0}),m=(0,t.I)("svg")({name:"Svg",class:"s9xr4bh",propsAsIs:!1}),x=(0,t.I)(c.CS.path)({name:"Line",class:"l1vuqoq6",propsAsIs:!0}),I=function(s){let{}=s,[e,a]=l.useState("twinkle"),t="twinkle"===e?(0,o.y1)(16).reduce((s,e)=>"".concat(s," ").concat(0===e?"M":"L"," ").concat(e/15*500," ").concat(150*(e%2!=0?.75:.25)),""):"fade-in"===e?(0,o.y1)(16).reduce((s,e)=>{let a=e/15*500,n=150*(e%2!=0?.75:.25);return n=a<375?(0,o.W$)(d,(0,o.S8)(a,0,375,0,1))[1]:150,"".concat(s," ").concat(0===e?"M":"L"," ").concat(a," ").concat(n)},""):(0,o.y1)(16).reduce((s,e)=>{let a=e/15*500,n=150*(e%2!=0?.75:.25);if(a<375){let s=(0,o.W$)(d,(0,o.S8)(a,0,375,0,1));n*=(0,o.S8)(s[1],0,150,0,1)}return"".concat(s," ").concat(0===e?"M":"L"," ").concat(a," ").concat(n)},""),r=(0,c.zh)({d:t});return(0,n.jsxs)(v,{children:[(0,n.jsx)(i.A,{title:"Animation:",options:[{label:"twinkle",value:"twinkle"},{label:"fadeFromTransparent",value:"fade-in"},{label:"twinkle + fadeFromTransparent",value:"twinkle-fade-in"}],value:e,handleSelect:s=>{a(s)}}),(0,n.jsx)(u,{children:(0,n.jsx)(m,{viewBox:"0 0 500 150",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"none",children:(0,n.jsx)(x,{d:r.d,fill:"none"})})})]})};a(38434)},60740:s=>{s.exports={g1oooq75:"g1oooq75",a1m5d84d:"a1m5d84d",v1lpa6qu:"v1lpa6qu",lox4ews:"lox4ews",oeqdvn3:"oeqdvn3",t69nftb:"t69nftb",i1w98lv0:"i1w98lv0",v1x92m40:"v1x92m40",t1sb0agw:"t1sb0agw"}},38434:s=>{s.exports={w166ck7h:"w166ck7h",s1u4odpn:"s1u4odpn",s9xr4bh:"s9xr4bh",l1vuqoq6:"l1vuqoq6"}}}]);
//# sourceMappingURL=52148.afc3f79af79be747.js.map