https://www.svgator.com/c7ef2f852d5a181df1dae69c0a73d9b0f42b6e6b-5959f4bafa77c066ce70.js

1"use strict";(self.webpackChunkwww_svgator=self.webpackChunkwww_svgator||[]).push([[5327],{180:function(e,t,n){n.d(t,{A:function(){return d}});var i=n(6540),r=n(6942),s=n.n(r),a=n(1664),o="dD_jn",c="dD_jp",l="dD_pL",u="dD_pK";function d(e){let t=e.avatar,n=e.alt,r=e.comment,d=e.name,m=e.occupation,h=e.className;return i.createElement("div",{className:s()(u,h)},i.createElement(a.A,{src:{png:a.A.LP_CDN+t},alt:n,size:[80,80],className:s()(c),skipLazy:!0}),i.createElement("p",{className:s()(l)},r),i.createElement("p",{className:s()(o)},i.createElement("strong",null,d),i.createElement("br",null),m))}},975:function(e,t,n){n.d(t,{A:function(){return u}});var i=n(6540),r="by_bx",s="by_hL",a="by_hJ",o=n(4785),c=n(6942),l=n.n(c);function u(e){let t=e.className,n=e.style,c=e.title,u=e.subtitle,d=e.cols,m=e.children,h=e.columnListClassName,f=void 0===h?null:h;return i.createElement("div",{className:l()(a,t),style:n},i.createElement("div",{className:r},i.createElement(o.A,null,c),u,i.createElement("div",{className:l()(s,f)},i.Children.toArray(d))),m)}},1649:function(e,t){t.A=function(e,t,n,i){void 0===i&&(i=null);const r={"@type":"HowTo",name:e,description:t,step:n.map((e,t)=>({"@type":"HowToStep",position:t+1,name:e.name,text:e.text}))};return i&&(r["@id"]=i),r}},2157:function(e,t,n){n.d(t,{A:function(){return d}});var i=n(7387),r=n(6540),s=n(9549),a=n(6942),o=n.n(a),c=n(3512),l=n(2800),u=n(7392);let d=function(e){function t(t){var n;return(n=e.call(this,t)||this).contentRef=(0,r.createRef)(),n}(0,i.A)(t,e);var n=t.prototype;return n.componentDidMount=function(){if(this.props.loader&&(0,l.Iw)(this.props.loader),this.props.skipAnimationWatcher)return c.A.map(this.contentRef.current,u.Iy);"object"==typeof window&&window.document&&window.innerWidth<1440?window.addEventListener("userFirstAction",e=>(0,l.Gy)(!1),{once:!0}):(0,l.Gy)(!1),c.A.map(this.contentRef.current,u.Iy)},n.componentWillUnmount=function(){this.props.skipAnimationWatcher||(0,l.Gy)(!0)},n.render=function(){return r.createElement("div",{className:o()("bB_hN",this.props.className),ref:this.contentRef},this.props.children,r.createElement(s.A,null))},t}(r.Component)},2544:function(e,t,n){n.d(t,{A:function(){return d}});var i=n(8587),r=n(6540),s=n(6942),a=n.n(s),o=n(8439),c=n(8248),l="cg_kW";const u=["children","media","className","isReversed"];var d=function(e){const t=e.children,n=e.media,s=e.className,d=e.isReversed,m=(0,i.A)(e,u);return r.createElement(o.A,Object.assign({className:a()("cg_b8",s)},m),r.createElement(c.A,{className:a()("cg_d",{[l]:d})},r.createElement("div",{className:"cg_cb"},t),r.createElement("div",{className:"cg_kX"},n)))}},3073:function(e,t){t.A=function(e,t,n){const i={"@type":"BreadcrumbList","@id":t+"#BreadcrumbList",itemListElement:n.map((e,t)=>({"@type":"ListItem",position:t+1,name:e.name,item:e.link}))};return e&&(i.name=e),i}},3559:function(e,t,n){n.d(t,{A:function(){return l}});var i=n(6540),r=n(6942),s=n.n(r),a=n(1664),o=n(2505),c="dT_qn";var l=e=>{let t=e.title,n=e.text,r=e.alt,l=e.image,u=e.className,d=e.size,m=void 0===d?[186,130]:d;return i.createElement("div",{className:s()("dT_bg",c,"dT_qm",u,c)},i.createElement(o.A,{className:"dT_c9",alt:r,size:m,src:a.A.LP_CDN+l,skipLazy:!0}),i.createElement("h3",{className:"dT_0"},t),i.createElement("p",{className:"dT_d7"},n))}},4086:function(e,t,n){n.d(t,{A:function(){return f}});var i=n(6540),r=n(4506),s=n(8504),a=n(1844),o=n(5047),c=n(2075),l=n(8102),u=n(3073),d=n(3890);var m=function(e,t){let n=e.headline,i=e.name,m=e.published,h=e.modified,f=e.url,p=e.description,_=e.middleBreadcrumbs;const v=(0,u.A)(null,f,[{name:"SVGator",link:"https://www.svgator.com/"}].concat((0,r.A)(_),[{name:i,link:f}]));t.forEach(e=>{!e["@id"]&&e["@type"]&&(e["@id"]=f+"#"+e["@type"])});const A={inLanguage:(0,d.A)(),accessMode:["textual","visual"],isFamilyFriendly:!0,about:{"@id":a.A.id},isPartOf:{"@id":c.A.id},reviewedBy:{"@id":o.A.id},breadcrumb:{"@id":v["@id"]},hasPart:t.map(e=>e["@id"]?{"@id":e["@id"]}:null).filter(e=>e)};return n&&(A.headline=n),m&&(A.datePublished=m),h&&(A.dateModified=h),{"@context":"https://schema.org","@graph":[(0,o.A)(),(0,c.A)(),(0,l.A)(),(0,a.A)()].concat((0,r.A)(t),[v,(0,s.A)(i,f,p,f+"#WebPage",A)])}},h=n(8649);var f=function(e){let t=e.headline,n=e.name,r=e.published,s=e.modified,a=e.description,o=e.location,c=e.pageSpecificLD,l=e.middleBreadcrumbs,u=void 0===l?[]:l;const d=o.origin||(0,h.A)().siteUrl,f=d+o.pathname;let p=c(f);Array.isArray(p)||(p=p.hasPart||[]);const _=m({headline:t,name:n,published:r,modified:s,url:f,description:a,middleBreadcrumbs:u.map(e=>({name:e.name,link:d+e.link}))},p);return i.createElement("script",{key:f,type:"application/ld+json"},JSON.stringify(_))}},4785:function(e,t,n){n.d(t,{A:function(){return c}});var i=n(6540),r="bz_hM",s="bz_0",a=n(6942),o=n.n(a);function c(e){let t=e.children,n=e.className,a=e.left,c=e.style;const l=[s];return a||l.push(r),i.createElement("div",{className:o().apply(void 0,l.concat([n])),style:c},i.Children.toArray(t))}},5282:function(e,t,n){n.d(t,{A:function(){return d}});var i=n(6540),r=n(6942),s=n.n(r),a=n(9584),o=n(2505),c=n(2212);let l=function(){function e(e,t,n){void 0===n&&(n={}),this._prevTime=void 0,this._gridRef=void 0,this._parentRef=void 0,this._animationFrame=void 0,this._timeout=void 0,this._direction=-1,this._observer=void 0,this._inViewport=!1,this._currentOffset=0,this._options={pixelPerSeconds:50,delayedAnimateWait:1e3,animationThreshold:100},Object.assign(this._options,n),this._gridRef=e,this._parentRef=t}var t=e.prototype;return t._delayedAnimate=function(){this.stop(),this._timeout=setTimeout(()=>{this._timeout=null,this.start()},this._options.delayedAnimateWait)},t._stopObserver=function(){this._observer&&(this.parent&&this._observer.unobserve(this.parent),delete this._observer)},t._startObserver=function(){if(!this._observer){const e=.05;this._observer=new IntersectionObserver((t,n)=>{for(const r of t){var i;r.target===this.grid?(this._inViewport=r.intersectionRatio>e,this._inViewport&&null!==(i=this._waitForViewportCallback)&&void 0!==i&&i.call&&(this._waitForViewportCallback(),this._waitForViewportCallback=null)):n.unobserve(r.target)}},{root:null,threshold:e})}this._observer.observe(this.grid)},t._reverse=function(){this._direction*=-1,this._delayedAnimate()},t._requestNextFrame=function(){this._animationFrame=window.requestAnimationFrame(()=>this._animate())},t._animate=function(){if(this.largeScreen)return this.parent.style.left="",this._delayedAnimate();if(!this._inViewport)return void(this._waitForViewportCallback=()=>this.start());this._animationFrame=null;const e=Date.now(),t=(e-this._prevTime)/1e3*this._options.pixelPerSeconds,n=this.currentOffset+Math.round(t)*this._direction,i=this.maxOffset;return n>i?(this.currentOffset=i,this._reverse()):n<-i?(this.currentOffset=-i,this._reverse()):(this._prevTime=e,this.currentOffset=n,void this._requestNextFrame())},t.toggle=function(){if(this._observer)return this.stop();this.start()},t.start=function(e){if(this.stop(),e)return this.currentOffset=this.currentOffset?this.maxOffset:0,this._reverse();this._prevTime=Date.now(),this._startObserver(),this._requestNextFrame()},t.stop=function(){this._animationFrame&&(window.cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this._timeout&&(clearTimeout(this._timeout),this._timeout=null),this._stopObserver()},(0,c.A)(e,[{key:"currentOffset",get:function(){return this._currentOffset},set:function(e){this._currentOffset=e,this.parent.style.transform="translateX("+e+"px)"}},{key:"grid",get:function(){return this._gridRef.current}},{key:"parent",get:function(){return this._parentRef.current}},{key:"gridWidth",get:function(){return this.grid.offsetWidth}},{key:"windowWidth",get:function(){return window.innerWidth}},{key:"maxOffset",get:function(){return(this.gridWidth-this.windowWidth)/2}},{key:"largeScreen",get:function(){return this.maxOffset<this._options.animationThreshold}}])}();var u=n(2800);var d=e=>{let t=e.className,n=e.animations,r=e.itemClassName;const c=(0,i.useRef)(),d=(0,i.useRef)(),m=(0,i.useMemo)(()=>new l(c,d),[c,d]);return(0,i.useEffect)(()=>(m.start(),()=>m.stop()),[m,d,c]),i.createElement("div",Object.assign({className:s()("dX_g5",t),ref:d,role:"note","aria-label":"Animation examples"},(0,u.CN)()?{onTouchStart:()=>

1m.toggle()}:{onMouseEnter:()=>m.stop(),onMouseLeave:()=>m.start()}),i.createElement(a.A,{className:s()("dX_db"),ref:c},n.map(e=>i.createElement("div",{className:s()(r),key:e.src},i.createElement(o.A,e)))))}},7060:function(e,t,n){n.d(t,{A:function(){return u}});var i=n(6540),r=n(6942),s=n.n(r),a=n(1664),o="dC_nb",c="dC_mJ",l="dC_pJ";function u(e){let t=e.className,n=e.url,r=e.text,u=e.icon,d=e.iconAlt,m=e.iconSize;return i.createElement("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:s()(l,t)},u&&i.createElement(a.A,{src:u,alt:d||"",size:m||[22,32],className:c,skipLazy:!0}),i.createElement("span",{className:o},r))}},7069:function(e,t,n){n.d(t,{A:function(){return o}});var i=n(6540),r=n(6942),s=n.n(r),a=n(5901);var o=e=>{let t=e.links,n=e.className;const r=(0,i.useState)(!1),o=r[0],c=r[1];return i.createElement("div",{className:s()("dh_lg",n,o?"dh_nR":null)},i.createElement("div",{className:s()("dh_nP"),style:{"--link-items":t.length}},t.map((e,t)=>i.createElement(a.A,{key:t,className:"dh_kS",to:e.href},e.icon,e.title))),i.createElement("a",{href:"#show-more",onClick:e=>{c(!o),e.preventDefault()},className:"dh_nQ"},i.createElement("svg",{width:"24",height:"23",viewBox:"0 0 24 23",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{d:"M19 9L12 15L5 9",stroke:"white",strokeLinecap:"round"})),o?"Show less":"Show more"))}},9287:function(e,t,n){n.d(t,{CY:function(){return s},Fd:function(){return c},Og:function(){return a},Ws:function(){return o}});var i=n(4506),r=n(8531);const s=e=>[].concat((0,i.A)((0,r.Mk)(e).links),(0,i.A)((0,r.PD)(e).links),(0,i.A)((0,r.bC)(e).links),(0,i.A)((0,r.m4)(e).links),(0,i.A)((0,r.tM)(e).links),(0,i.A)((0,r.xy)(e).links)),a="For every kind of creator",o="One tool. Endless use cases.",c="See how other professionals are using SVGator to ship motion that works."},9584:function(e,t,n){n.d(t,{A:function(){return o}});var i=n(6540),r=n(6942),s=n.n(r);const a=(0,i.forwardRef)((e,t)=>{let n=e.className,r=e.children,a=e.style;return i.createElement("div",{className:s()("bC_b6",n),style:a,ref:t},i.Children.toArray(r))});a.displayName="GridSquare";var o=a}}]);