├── public
    ├── favicon.ico
    ├── lights.png
    ├── nusu_pp.png
    ├── oguz_pp.png
    ├── grid.svg
    └── stars.svg
├── pages
    ├── _app.tsx
    ├── _document.tsx
    ├── index.tsx
    ├── Normal.tsx
    ├── Loader.tsx
    └── Special.tsx
├── next.config.js
├── README.md
├── lib
    ├── createSVGMask.ts
    └── useElementSize.ts
├── .gitignore
├── package.json
├── tsconfig.json
├── components
    └── GlowingButton
    │   ├── Stars.tsx
    │   ├── Intro.tsx
    │   ├── Credits.tsx
    │   └── Browser.tsx
├── styles
    └── globals.css
└── yarn.lock


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nusu/react-glowing-button/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/lights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nusu/react-glowing-button/HEAD/public/lights.png


--------------------------------------------------------------------------------
/public/nusu_pp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nusu/react-glowing-button/HEAD/public/nusu_pp.png


--------------------------------------------------------------------------------
/public/oguz_pp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nusu/react-glowing-button/HEAD/public/oguz_pp.png


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 | 
4 | export default function App({ Component, pageProps }: AppProps) {
5 |   return <Component {...pageProps} />
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   compiler: {
 5 |     styledComponents: true,
 6 |   },
 7 |   typescript: {
 8 |     ignoreBuildErrors: true,
 9 |   },
10 | }
11 | 
12 | module.exports = nextConfig
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Glowing Button
 2 | 
 3 | A glowing transparent button experiment by [@nusualabuga](https://twitter.com/nusualabuga) and [@oguzyagizkara](https://twitter.com/oguzyagizkara)
 4 | 
 5 | ## Preview:
 6 | 
 7 | https://user-images.githubusercontent.com/1702215/214709198-54e73373-ed00-4556-a752-ab04ebceadfd.mp4
 8 | 
 9 | 
10 | ## Demo:
11 | https://react-glowing-button.vercel.app/
12 | 


--------------------------------------------------------------------------------
/lib/createSVGMask.ts:
--------------------------------------------------------------------------------
1 | export default function createSVGMask(width:number, height: number) {
2 |     let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
3 |         <rect x="0.5" y="0.5" width="${width - 1}" height="${height - 1}" fill="none" stroke="black" stroke-width="1" rx="22"/>
4 |     </svg>`;
5 | 
6 |   return "data:image/svg+xml," + encodeURIComponent(svg);
7 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "glowing-button",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@next/font": "13.1.1",
12 |     "@types/node": "18.11.18",
13 |     "@types/react": "17.0.2",
14 |     "@types/react-dom": "17.0.2",
15 |     "@types/styled-components": "^5.1.26",
16 |     "framer-motion": "6.5.1",
17 |     "next": "12.2.5",
18 |     "react": "17.0.2",
19 |     "react-dom": "17.0.2",
20 |     "styled-components": "5.3.5",
21 |     "typescript": "4.9.4",
22 |     "usehooks-ts": "^2.9.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/c/*": ["components/*"],
 6 |     },
 7 |     "target": "esnext",
 8 |     "module": "esnext",
 9 |     "jsx": "preserve",
10 |     "lib": [
11 |       "dom",
12 |       "es2017"
13 |     ],
14 |     "moduleResolution": "node",
15 |     "allowJs": true,
16 |     "noEmit": true,
17 |     "strict": true,
18 |     "allowSyntheticDefaultImports": true,
19 |     "skipLibCheck": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "removeComments": false,
23 |     "preserveConstEnums": true,
24 |     "sourceMap": true,
25 |     "esModuleInterop": true,
26 |     "forceConsistentCasingInFileNames": true,
27 |     "resolveJsonModule": true,
28 |     "isolatedModules": true,
29 |     "incremental": true
30 |   },
31 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
32 |   "exclude": ["node_modules"]
33 | }
34 | 


--------------------------------------------------------------------------------
/components/GlowingButton/Stars.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components"
 2 | import { motion } from 'framer-motion'
 3 | 
 4 | const Wrapper = styled.div`
 5 |   position: absolute;
 6 |   width: 100vw;
 7 |   height: 100vh;
 8 |   top: 0;
 9 |   mask: url('/stars.svg');
10 |   overflow: hidden;
11 |   pointer-events: none;
12 | `
13 | 
14 | const Gradient = styled.div`
15 |   width: 40vw;
16 |   height: 40vw;
17 |   background: radial-gradient(50% 50% at 50% 50%, #000000 24.68%, #FFFFFF 41.49%, #000000 50%, #000000 72.92%, #FFFFFF 89.06%, #000000 96.88%);
18 |   border-radius: 999px;
19 |   position: absolute;
20 |   left: calc(50% - 20vw);
21 |   top: 5vw;
22 | `
23 | 
24 | export default function Stars() {
25 |   return (
26 |     <Wrapper>
27 |       <Gradient as={motion.div} 
28 |         animate={{ scale: [1, 3] }}
29 |         transition={{ repeat: Infinity, originX: 1, originY: 0, duration: 10, repeatType: "mirror" }}
30 |       />
31 |     </Wrapper>
32 |   )
33 | }


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'
 2 | import { ServerStyleSheet } from 'styled-components'
 3 | 
 4 | export default class MyDocument extends Document {
 5 |   render () {
 6 |     return (
 7 |       <Html lang="en">
 8 |         <Head>
 9 |           <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
10 |         </Head>
11 |         <body>
12 |           <Main />
13 |           <NextScript />
14 |         </body>
15 |       </Html>
16 |     )
17 |   }
18 | 
19 |   static async getInitialProps(ctx: DocumentContext) {
20 |     const sheet = new ServerStyleSheet()
21 |     const originalRenderPage = ctx.renderPage
22 | 
23 |     try {
24 |       ctx.renderPage = () =>
25 |         originalRenderPage({
26 |           enhanceApp: (App) => (props) =>
27 |             sheet.collectStyles(<App {...props} />),
28 |         })
29 | 
30 |       const initialProps = await Document.getInitialProps(ctx)
31 |       return {
32 |         ...initialProps,
33 |         styles: (
34 |           <>
35 |             {initialProps.styles}
36 |             {sheet.getStyleElement()}
37 |           </>
38 |         ),
39 |       }
40 |     } finally {
41 |       sheet.seal()
42 |     }
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/lib/useElementSize.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from 'react'
 2 | 
 3 | import { useEventListener, useIsomorphicLayoutEffect } from 'usehooks-ts'
 4 | 
 5 | interface Size {
 6 |   width: number
 7 |   height: number
 8 | }
 9 | 
10 | function useElementSize(): [
11 |   (node: HTMLButtonElement | null) => void,
12 |   Size,
13 | ] {
14 |   // Mutable values like 'ref.current' aren't valid dependencies
15 |   // because mutating them doesn't re-render the component.
16 |   // Instead, we use a state as a ref to be reactive.
17 |   const [ref, setRef] = useState<HTMLButtonElement | null>(null)
18 |   const [size, setSize] = useState<Size>({
19 |     width: 0,
20 |     height: 0,
21 |   })
22 | 
23 |   // Prevent too many rendering using useCallback
24 |   const handleSize = useCallback(() => {
25 |     setSize({
26 |       width: ref?.offsetWidth || 0,
27 |       height: ref?.offsetHeight || 0,
28 |     })
29 |     // eslint-disable-next-line react-hooks/exhaustive-deps
30 |   }, [ref?.offsetHeight, ref?.offsetWidth])
31 | 
32 |   useEventListener('resize', handleSize)
33 | 
34 |   useIsomorphicLayoutEffect(() => {
35 |     handleSize()
36 |     // eslint-disable-next-line react-hooks/exhaustive-deps
37 |   }, [ref?.offsetHeight, ref?.offsetWidth])
38 | 
39 |   return [setRef, size]
40 | }
41 | 
42 | export default useElementSize


--------------------------------------------------------------------------------
/components/GlowingButton/Intro.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components"
 2 | 
 3 | const H1 = styled.h1`
 4 |   font-family: "Inter";
 5 |   font-weight: 400;
 6 |   font-size: 40px;
 7 |   line-height: 48px;
 8 |   /* identical to box height, or 120% */
 9 | 
10 |   text-align: center;
11 | 
12 |   background: radial-gradient(123.44% 123.44% at 56.63% 100%, #ECECEE 6.77%, rgba(255, 255, 255, 0.45) 100%);
13 |   -webkit-background-clip: text;
14 |   -webkit-text-fill-color: transparent;
15 |   background-clip: text;
16 |   text-fill-color: transparent;
17 | 
18 | `
19 | 
20 | const P = styled.p`
21 |   font-family: 'Inter V', 'Inter';
22 |   font-style: normal;
23 |   font-weight: 400;
24 |   font-size: 20px;
25 |   line-height: 32px;
26 |   /* identical to box height, or 160% */
27 | 
28 |   text-align: center;
29 |   letter-spacing: -0.01em;
30 | 
31 |   background: radial-gradient(123.44% 123.44% at 56.63% 100%, rgba(236, 236, 238, 0.5) 6.77%, rgba(255, 255, 255, 0.225) 100%);
32 |   -webkit-background-clip: text;
33 |   -webkit-text-fill-color: transparent;
34 |   background-clip: text;
35 |   text-fill-color: transparent;
36 | `
37 | 
38 | const Wrapper = styled.div`
39 |   display: flex;
40 |   flex-direction: column;
41 |   gap: 8px;
42 | `
43 | 
44 | export default function Intro() {
45 |   return (
46 |     <Wrapper>
47 |       <H1>Glowing Button.</H1>
48 |       <P>A magical button, interact with it.</P>
49 |     </Wrapper>
50 |   )
51 | }


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --max-width: 1100px;
  3 |   --border-radius: 12px;
  4 |   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
  5 |     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
  6 |     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
  7 | 
  8 |   --foreground-rgb: 0, 0, 0;
  9 |   --background-start-rgb: 214, 219, 220;
 10 |   --background-end-rgb: 255, 255, 255;
 11 | 
 12 |   --primary-glow: conic-gradient(
 13 |     from 180deg at 50% 50%,
 14 |     #16abff33 0deg,
 15 |     #0885ff33 55deg,
 16 |     #54d6ff33 120deg,
 17 |     #0071ff33 160deg,
 18 |     transparent 360deg
 19 |   );
 20 |   --secondary-glow: radial-gradient(
 21 |     rgba(255, 255, 255, 1),
 22 |     rgba(255, 255, 255, 0)
 23 |   );
 24 | 
 25 |   --tile-start-rgb: 239, 245, 249;
 26 |   --tile-end-rgb: 228, 232, 233;
 27 |   --tile-border: conic-gradient(
 28 |     #00000080,
 29 |     #00000040,
 30 |     #00000030,
 31 |     #00000020,
 32 |     #00000010,
 33 |     #00000010,
 34 |     #00000080
 35 |   );
 36 | 
 37 |   --callout-rgb: 238, 240, 241;
 38 |   --callout-border-rgb: 172, 175, 176;
 39 |   --card-rgb: 180, 185, 188;
 40 |   --card-border-rgb: 131, 134, 135;
 41 | }
 42 | 
 43 | @media (prefers-color-scheme: dark) {
 44 |   :root {
 45 |     --foreground-rgb: 255, 255, 255;
 46 |     --background-start-rgb: 0, 0, 0;
 47 |     --background-end-rgb: 0, 0, 0;
 48 | 
 49 |     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
 50 |     --secondary-glow: linear-gradient(
 51 |       to bottom right,
 52 |       rgba(1, 65, 255, 0),
 53 |       rgba(1, 65, 255, 0),
 54 |       rgba(1, 65, 255, 0.3)
 55 |     );
 56 | 
 57 |     --tile-start-rgb: 2, 13, 46;
 58 |     --tile-end-rgb: 2, 5, 19;
 59 |     --tile-border: conic-gradient(
 60 |       #ffffff80,
 61 |       #ffffff40,
 62 |       #ffffff30,
 63 |       #ffffff20,
 64 |       #ffffff10,
 65 |       #ffffff10,
 66 |       #ffffff80
 67 |     );
 68 | 
 69 |     --callout-rgb: 20, 20, 20;
 70 |     --callout-border-rgb: 108, 108, 108;
 71 |     --card-rgb: 100, 100, 100;
 72 |     --card-border-rgb: 200, 200, 200;
 73 |   }
 74 | }
 75 | 
 76 | * {
 77 |   box-sizing: border-box;
 78 |   padding: 0;
 79 |   margin: 0;
 80 | }
 81 | 
 82 | html,
 83 | body {
 84 |   max-width: 100vw;
 85 |   overflow-x: hidden;
 86 | }
 87 | 
 88 | body {
 89 |   text-rendering: optimizelegibility;
 90 |   -webkit-font-smoothing: antialiased;
 91 |   color: rgb(var(--foreground-rgb));
 92 |   background: linear-gradient(
 93 |       to bottom,
 94 |       transparent,
 95 |       rgb(var(--background-end-rgb))
 96 |     )
 97 |     rgb(var(--background-start-rgb));
 98 | }
 99 | 
100 | a {
101 |   color: inherit;
102 |   text-decoration: none;
103 | }
104 | 
105 | @media (prefers-color-scheme: dark) {
106 |   html {
107 |     color-scheme: dark;
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/components/GlowingButton/Credits.tsx:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components"
  2 | 
  3 | const Wrapper = styled.div`
  4 |   display: flex;
  5 |   gap: 40px;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 |   margin-top: 132px;
  9 | `
 10 | 
 11 | const MiddleLine = styled.div`
 12 |   width: 1px;
 13 |   height: 48px;
 14 |   background-image: url("data:image/svg+xml,%3Csvg width='1' height='48' viewBox='0 0 1 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='2.18557e-08' x2='0.499998' y2='48' stroke='url(%23paint0_radial_1_187)' stroke-opacity='0.1'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_1_187' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(-3.4969e-07 24) rotate(90) scale(24 16)'%3E%3Cstop offset='0.235042' stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A");
 15 | `
 16 | 
 17 | const Item = styled.a`
 18 |   padding: 12px 16px;
 19 |   border-radius: 10px;
 20 |   width: 210px;
 21 |   height: 72px;
 22 |   display: flex;
 23 |   gap: 16px;
 24 |   align-items: center;
 25 |   position: relative;
 26 |   background: radial-gradient(46.41% 74.04% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
 27 |   transition: 1s all;
 28 | 
 29 |   &:before {
 30 |     content: "";
 31 |     width: calc(100% + 2px);
 32 |     height: calc(100% + 2px);
 33 |     border-radius: 10px;
 34 |     background: radial-gradient(46.41% 74.04% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
 35 |     position: absolute;
 36 |     top: -1px;
 37 |     left: -1px;
 38 |     mask: url("data:image/svg+xml,%3Csvg width='210' height='72' viewBox='0 0 210 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='209' height='72' rx='9.5' stroke='black'/%3E%3C/svg%3E%0A");
 39 |     mask-repeat: no-repeat;
 40 |     mask-mode: alpha;
 41 |     pointer-events: none;
 42 |   }
 43 | 
 44 |   &:hover {
 45 |     background: radial-gradient(46.41% 74.04% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
 46 | 
 47 |     :before {
 48 |       background: radial-gradient(46.41% 74.04% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%),
 49 |       radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%),
 50 |       linear-gradient(0deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
 51 |       linear-gradient(0deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01));
 52 |     }
 53 |   }
 54 |   
 55 |   
 56 |   p {
 57 |     &:first-child {
 58 |       font-family: 'Inter';
 59 |       font-style: normal;
 60 |       font-weight: 400;
 61 |       font-size: 14px;
 62 |       line-height: 24px;
 63 |       letter-spacing: -0.02em;
 64 |       background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 8.85%, #FFFFFF 100%);
 65 |       -webkit-background-clip: text;
 66 |       -webkit-text-fill-color: transparent;
 67 |       background-clip: text;
 68 |       text-fill-color: transparent;
 69 |     }
 70 |     &:last-child {
 71 |       font-family: 'Inter';
 72 |       font-style: normal;
 73 |       font-weight: 400;
 74 |       font-size: 14px;
 75 |       line-height: 24px;
 76 |       letter-spacing: -0.02em;
 77 |       color: rgba(255, 255, 255, 0.5);
 78 |     }
 79 |   }
 80 | `
 81 | 
 82 | export default function Credits() {
 83 | 
 84 |   return (
 85 |     <Wrapper>
 86 |       <Item href="https://twitter.com/oguzyagizkara" target="_blank">
 87 |         <img src="/oguz_pp.png" width={48} />
 88 |         <div>
 89 |           <p>Design</p>
 90 |           <p>@oguzyagizkara</p>
 91 |         </div>
 92 |       </Item> 
 93 |       <MiddleLine />
 94 |       <Item href="https://twitter.com/nusualabuga" target="_blank">
 95 |         <img src="/nusu_pp.png" width={48} />
 96 |         <div>
 97 |           <p>Code</p>
 98 |           <p>@nusualabuga</p>
 99 |         </div>
100 |       </Item> 
101 |     </Wrapper>
102 |   )
103 | }


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components"
  2 | import { AnimatePresence, motion, useAnimationControls } from "framer-motion"
  3 | import Stars from "@/c/GlowingButton/Stars"
  4 | import Intro from "@/c/GlowingButton/Intro"
  5 | import Browser from "@/c/GlowingButton/Browser"
  6 | import { useEffect, useState } from "react"
  7 | import NormalButton from "./Normal"
  8 | import Loader from "./Loader"
  9 | import Special from "./Special"
 10 | import Credits from "@/c/GlowingButton/Credits"
 11 | 
 12 | const BACKGROUNDS = [
 13 |   "#020308",
 14 |   "#010609",
 15 |   "#0B020D",
 16 |   "#090401",
 17 |   "#010902"
 18 | ]
 19 | 
 20 | const Container = styled.div<{bg: string}>`
 21 |   width: 100vw;
 22 |   height: 100vh;
 23 |   background: radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), ${p => p.bg};
 24 |   transition: 1s all;
 25 | 
 26 |   display: flex;
 27 |   flex-direction: column;
 28 |   align-items: center;
 29 |   justify-content: center;
 30 | `
 31 | 
 32 | const Content = styled.div`
 33 |   display: flex;
 34 |   gap: 32px;
 35 | `
 36 | 
 37 | const Notice = styled.div`
 38 |   width: 330px;
 39 |   height: 40px;
 40 |   padding: 6px 16px;
 41 |   background: radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.01);
 42 |   backdrop-filter: blur(6px);
 43 |   border-radius: 6px;
 44 |   position: absolute;
 45 |   font-family: "Inter";
 46 |   bottom: 40px;
 47 |   font-size: 14px;
 48 |   text-align: center;
 49 |   line-height: 24px;
 50 | 
 51 |   span {
 52 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 8.85%, #FFFFFF 100%);
 53 |     -webkit-background-clip: text;
 54 |     -webkit-text-fill-color: transparent;
 55 |     background-clip: text;
 56 |     text-fill-color: transparent;
 57 |   }
 58 | 
 59 | 
 60 |   &:before {
 61 |     content: "";
 62 |     width: calc(100% + 2px);
 63 |     height: calc(100% + 2px);
 64 |     border-radius: 6px;
 65 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%),
 66 |     linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
 67 |     position: absolute;
 68 |     top: -1px;
 69 |     left: -1px;
 70 |     mask: url("data:image/svg+xml,%3Csvg width='330' height='42' viewBox='0 0 330 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='329' height='42' rx='9.5' stroke='black'/%3E%3C/svg%3E%0A");
 71 |     mask-repeat: no-repeat;
 72 |     mask-mode: alpha;
 73 |     pointer-events: none;
 74 |   }
 75 | `
 76 | 
 77 | enum ActiveTab {
 78 |   'Normal' = 1,
 79 |   'Loader' = 2,
 80 |   'Special' = 3
 81 | }
 82 | 
 83 | const variants = {
 84 |   hidden: { opacity: 0, y: 15 },
 85 |   open: { 
 86 |     opacity: 1,
 87 |     y: 0,
 88 |     transition: {
 89 |       duration: .5,
 90 |       staggerChildren: 0.1
 91 |     } 
 92 |   },
 93 |   out: {
 94 |     opacity: 0,
 95 |     y: 15,
 96 |     transition: {
 97 |       duration: .2,
 98 |       staggerChildren: 0.1,
 99 |       when: "afterChildren"
100 |     },
101 |   }
102 | }
103 | 
104 | export default function GlowingButton() {
105 |   const [ activeTab, setActiveTab ] = useState(ActiveTab.Normal)
106 |   const [ bg, setBg ] = useState(0)
107 |   const [ _, setShow ] = useState(false)
108 | 
109 |   // this is only here to re-trigger mask rendering after font load.
110 |   useEffect(() => {
111 |     setTimeout(() => {
112 |       setShow(true)
113 |     }, 200)
114 |   }, [])
115 | 
116 |   setTimeout(() => {
117 |     const newBg = bg < BACKGROUNDS.length -1 ? bg + 1 : 0 
118 | 
119 |     setBg(newBg)
120 |   }, 10000)
121 | 
122 |   return (
123 |     <Container bg={BACKGROUNDS[bg]}>
124 |       <Stars />
125 |       <Intro />
126 |       
127 |       <Browser m="116px 0 0 0" onActiveTabChange={(activeIndex) => setActiveTab(activeIndex)}>
128 |         <AnimatePresence exitBeforeEnter={true}>
129 | 
130 |           {activeTab === 1 && 
131 |             <Content 
132 |               as={motion.div}
133 |               key={ActiveTab.Normal}
134 |               variants={variants}
135 |               initial="hidden"
136 |               animate="open"
137 |               exit="out"
138 |             >
139 |               <NormalButton />
140 |               <NormalButton noStar />
141 |             </Content>
142 |           }
143 | 
144 |           {activeTab === 2 && 
145 |             <Content 
146 |               as={motion.div}
147 |               key={ActiveTab.Loader}
148 |               variants={variants}
149 |               initial="hidden"
150 |               animate="open"
151 |               exit="out"
152 |             >
153 |               <Loader />
154 |               <Loader noBorder />
155 |             </Content>
156 |           }
157 |           
158 |           {activeTab === 3 && 
159 |             <Content 
160 |               as={motion.div}
161 |               key={ActiveTab.Special}
162 |               variants={variants}
163 |               initial="hidden"
164 |               animate="open"
165 |               exit="out"
166 |             >
167 |               <Special />
168 |             </Content>
169 |           }
170 | 
171 |         </AnimatePresence>
172 |       </Browser>
173 | 
174 |       <Credits />
175 | 
176 |       <Notice
177 |         as={motion.div}
178 |         initial={{ opacity: 0, y: 100 }}
179 |         animate={ activeTab === 3 ? {
180 |           opacity: 1,
181 |           y: 0
182 |         } : {
183 |           opacity: 0,
184 |           y: 100
185 |         }}
186 |         transition={{
187 |           duration: .6
188 |         }}
189 |       >
190 |         <span>Move away your cursor to see the magic ✨</span>
191 |       </Notice> 
192 |     </Container>
193 |   )
194 | }


--------------------------------------------------------------------------------
/public/grid.svg:
--------------------------------------------------------------------------------
 1 | <svg width="665" height="470" viewBox="0 0 665 470" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M196.5 78.5H156.5V118.5H196.5V78.5Z" fill="url(#paint0_linear_147_2587)" fill-opacity="0.02"/>
 3 | <path d="M157.5 312.5H117.5V352.5H157.5V312.5Z" fill="url(#paint1_linear_147_2587)" fill-opacity="0.02"/>
 4 | <path d="M547.5 117.5H507.5V157.5H547.5V117.5Z" fill="url(#paint2_linear_147_2587)" fill-opacity="0.02"/>
 5 | <path d="M40 1H1V40M40 1V40M40 1H79M40 40H1M40 40H79M40 40V79M1 40V79M79 1V40M79 1H118M79 40H118M79 40V79M118 1V40M118 1H157M118 40H157M118 40V79M157 1V40M157 1H196M157 40H196M157 40V79M196 1V40M196 1H235M196 40H235M196 40V79M235 1V40M235 1H274M235 40H274M235 40V79M274 1V40M274 1H313M274 40H313M274 40V79M313 1V40M313 1H352M313 40H352M313 40V79M352 1V40M352 1H391M352 40H391M352 40V79M391 1V40M391 1H430M391 40H430M391 40V79M430 1V40M430 1H469M430 40H469M430 40V79M469 1V40M469 1H508M469 40H508M469 40V79M508 1V40M508 1H547M508 40H547M508 40V79M547 1V40M547 1H586M547 40H586M547 40V79M586 1V40M586 1H625M586 40H625M586 40V79M625 1V40M625 1H664V40M625 40H664M625 40V79M664 40V79M40 79H1M40 79H79M40 79V118M1 79V118M79 79H118M79 79V118M118 79H157M118 79V118M157 79H196M157 79V118M196 79H235M196 79V118M235 79H274M235 79V118M274 79H313M274 79V118M313 79H352M313 79V118M352 79H391M352 79V118M391 79H430M391 79V118M430 79H469M430 79V118M469 79H508M469 79V118M508 79H547M508 79V118M547 79H586M547 79V118M586 79H625M586 79V118M625 79H664M625 79V118M664 79V118M40 118H1M40 118H79M40 118V157M1 118V157M79 118H118M79 118V157M118 118H157M118 118V157M157 118H196M157 118V157M196 118H235M196 118V157M235 118H274M235 118V157M274 118H313M274 118V157M313 118H352M313 118V157M352 118H391M352 118V157M391 118H430M391 118V157M430 118H469M430 118V157M469 118H508M469 118V157M508 118H547M508 118V157M547 118H586M547 118V157M586 118H625M586 118V157M625 118H664M625 118V157M664 118V157M40 157H1M40 157H79M40 157V196M1 157V196M79 157H118M79 157V196M118 157H157M118 157V196M157 157H196M157 157V196M196 157H235M196 157V196M235 157H274M235 157V196M274 157H313M274 157V196M313 157H352M313 157V196M352 157H391M352 157V196M391 157H430M391 157V196M430 157H469M430 157V196M469 157H508M469 157V196M508 157H547M508 157V196M547 157H586M547 157V196M586 157H625M586 157V196M625 157H664M625 157V196M664 157V196M40 196H1M40 196H79M40 196V235M1 196V235M79 196H118M79 196V235M118 196H157M118 196V235M157 196H196M157 196V235M196 196H235M196 196V235M235 196H274M235 196V235M274 196H313M274 196V235M313 196H352M313 196V235M352 196H391M352 196V235M391 196H430M391 196V235M430 196H469M430 196V235M469 196H508M469 196V235M508 196H547M508 196V235M547 196H586M547 196V235M586 196H625M586 196V235M625 196H664M625 196V235M664 196V235M40 235H1M40 235H79M40 235V274M1 235V274M79 235H118M79 235V274M118 235H157M118 235V274M157 235H196M157 235V274M196 235H235M196 235V274M235 235H274M235 235V274M274 235H313M274 235V274M313 235H352M313 235V274M352 235H391M352 235V274M391 235H430M391 235V274M430 235H469M430 235V274M469 235H508M469 235V274M508 235H547M508 235V274M547 235H586M547 235V274M586 235H625M586 235V274M625 235H664M625 235V274M664 235V274M40 274H1M40 274H79M40 274V313M1 274V313M79 274H118M79 274V313M118 274H157M118 274V313M157 274H196M157 274V313M196 274H235M196 274V313M235 274H274M235 274V313M274 274H313M274 274V313M313 274H352M313 274V313M352 274H391M352 274V313M391 274H430M391 274V313M430 274H469M430 274V313M469 274H508M469 274V313M508 274H547M508 274V313M547 274H586M547 274V313M586 274H625M586 274V313M625 274H664M625 274V313M664 274V313M40 313H1M40 313H79M40 313V352M1 313V352M79 313H118M79 313V352M118 313H157M118 313V352M157 313H196M157 313V352M196 313H235M196 313V352M235 313H274M235 313V352M274 313H313M274 313V352M313 313H352M313 313V352M352 313H391M352 313V352M391 313H430M391 313V352M430 313H469M430 313V352M469 313H508M469 313V352M508 313H547M508 313V352M547 313H586M547 313V352M586 313H625M586 313V352M625 313H664M625 313V352M664 313V352M40 352H1M40 352H79M40 352V391M1 352V391M79 352H118M79 352V391M118 352H157M118 352V391M157 352H196M157 352V391M196 352H235M196 352V391M235 352H274M235 352V391M274 352H313M274 352V391M313 352H352M313 352V391M352 352H391M352 352V391M391 352H430M391 352V391M430 352H469M430 352V391M469 352H508M469 352V391M508 352H547M508 352V391M547 352H586M547 352V391M586 352H625M586 352V391M625 352H664M625 352V391M664 352V391M40 391H1M40 391H79M40 391V430M1 391V430M79 391H118M79 391V430M118 391H157M118 391V430M157 391H196M157 391V430M196 391H235M196 391V430M235 391H274M235 391V430M274 391H313M274 391V430M313 391H352M313 391V430M352 391H391M352 391V430M391 391H430M391 391V430M430 391H469M430 391V430M469 391H508M469 391V430M508 391H547M508 391V430M547 391H586M547 391V430M586 391H625M586 391V430M625 391H664M625 391V430M664 391V430M40 430H1M40 430H79M40 430V469M1 430V469H40M79 430H118M79 430V469M118 430H157M118 430V469M157 430H196M157 430V469M196 430H235M196 430V469M235 430H274M235 430V469M274 430H313M274 430V469M313 430H352M313 430V469M352 430H391M352 430V469M391 430H430M391 430V469M430 430H469M430 430V469M469 430H508M469 430V469M508 430H547M508 430V469M547 430H586M547 430V469M586 430H625M586 430V469M625 430H664M625 430V469M664 430V469H625M40 469H79M79 469H118M118 469H157M157 469H196M196 469H235M235 469H274M274 469H313M313 469H352M352 469H391M391 469H430M430 469H469M469 469H508M508 469H547M547 469H586M586 469H625" stroke="url(#paint3_radial_147_2587)" stroke-opacity="0.08"/>
 6 | <defs>
 7 | <linearGradient id="paint0_linear_147_2587" x1="176.5" y1="78.5" x2="176.5" y2="118.5" gradientUnits="userSpaceOnUse">
 8 | <stop stop-color="white" stop-opacity="0"/>
 9 | <stop offset="1" stop-color="white"/>
10 | </linearGradient>
11 | <linearGradient id="paint1_linear_147_2587" x1="137.5" y1="312.5" x2="137.5" y2="352.5" gradientUnits="userSpaceOnUse">
12 | <stop stop-color="white" stop-opacity="0"/>
13 | <stop offset="1" stop-color="white"/>
14 | </linearGradient>
15 | <linearGradient id="paint2_linear_147_2587" x1="527.5" y1="117.5" x2="527.5" y2="157.5" gradientUnits="userSpaceOnUse">
16 | <stop stop-color="white" stop-opacity="0"/>
17 | <stop offset="1" stop-color="white"/>
18 | </linearGradient>
19 | <radialGradient id="paint3_radial_147_2587" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(332.5 247.5) rotate(90) scale(221 332)">
20 | <stop stop-color="white"/>
21 | <stop offset="1" stop-color="white" stop-opacity="0"/>
22 | </radialGradient>
23 | </defs>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/components/GlowingButton/Browser.tsx:
--------------------------------------------------------------------------------
  1 | import styled, { css } from "styled-components"
  2 | import { motion } from "framer-motion"
  3 | import { useEffect, useRef, useState } from "react"
  4 | 
  5 | 
  6 | const Wrapper = styled.div<{m?: string}>`
  7 |   position: relative;
  8 |   ${p => p.m && `margin: ${p.m};`}
  9 |   &:before { 
 10 |     content: "";
 11 |     width: 665px;
 12 |     height: 470px;
 13 |     background: url(/grid.svg);
 14 |     background-size: cover;
 15 |     position: absolute;
 16 |     top: calc(50% - 235px);
 17 |     right: calc(50% - 332px);
 18 |   }
 19 | `
 20 | 
 21 | const BrowserPanel = styled.div`
 22 |   width: 400px;
 23 |   height: 200px;
 24 |   background: radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.01);
 25 |   backdrop-filter: blur(6px);
 26 |   border-radius: 10px;
 27 |   position: relative;
 28 | 
 29 |   &:before {
 30 |     content: "";
 31 |     width: calc(100% + 2px);
 32 |     height: calc(100% + 2px);
 33 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%),
 34 |     linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
 35 |     position: absolute;
 36 |     top: -1px;
 37 |     left: -1px;
 38 |     mask: url("data:image/svg+xml,%3Csvg width='402' height='202' viewBox='0 0 402 202' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='401' height='201' rx='9.5' stroke='black'/%3E%3C/svg%3E%0A");
 39 |     mask-mode: alpha;
 40 |     pointer-events: none;
 41 |   }
 42 | 
 43 |   &:after {
 44 |     content: "";
 45 |     background-image: url("data:image/svg+xml,%3Csvg width='52' height='12' viewBox='0 0 52 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23020308' fill-opacity='0.12'/%3E%3Ccircle cx='6' cy='6' r='5.5' stroke='white' stroke-opacity='0.1'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23020308' fill-opacity='0.12'/%3E%3Ccircle cx='26' cy='6' r='5.5' stroke='white' stroke-opacity='0.1'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%23020308' fill-opacity='0.12'/%3E%3Ccircle cx='46' cy='6' r='5.5' stroke='white' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
 46 |     position: absolute;
 47 |     top: 12px;
 48 |     left: 12px;
 49 |     width: 52px;
 50 |     height: 12px;
 51 |   }
 52 | `
 53 | 
 54 | const NavigatorLeftBG = styled.div<{width?: number}>`
 55 |   background: rgba(0, 0, 0, 0.16);
 56 |   border-bottom-right-radius: 6px;
 57 |   min-width: 84px;
 58 |   width: ${p => p.width}px;
 59 |   height: 36px;
 60 |   position: absolute;
 61 |   top: 0;
 62 |   left: 0;
 63 |   pointer-events: none;
 64 | 
 65 |   transition: 300ms all;
 66 | 
 67 |   &:before {
 68 |     content: "";
 69 |     position: absolute;
 70 |     inset: 0;
 71 |     border-top-left-radius: 6px;
 72 |     border-bottom-right-radius: 6px;
 73 |     padding: 1px;
 74 |     transition: 300ms all;
 75 |     background: radial-gradient(100% 148.61% at 90% 148.61%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%); 
 76 |     -webkit-mask: 
 77 |       linear-gradient(#fff 0 0) content-box, 
 78 |       linear-gradient(#fff 0 0);
 79 |     -webkit-mask-composite: xor;
 80 |             mask-composite: exclude; 
 81 |   }
 82 | `
 83 | 
 84 | const NavigatorRightBG = styled(NavigatorLeftBG)`
 85 |   height: 36px;
 86 |   border-bottom-right-radius: 0;
 87 |   min-width: 56px;
 88 |   left: unset;
 89 |   right: 0;
 90 | 
 91 |   &:before {
 92 |     border-top-left-radius: 0;
 93 |     border-bottom-left-radius: 6px;
 94 |     background: radial-gradient(100% 148.61% at 0% 148.61%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%); 
 95 |   }
 96 | `
 97 | 
 98 | const Navigation = styled.div`
 99 |   display: flex;
100 |   align-items: center;
101 | `
102 | 
103 | const Tabs = styled.div`
104 |   display: flex;
105 |   align-items: center;
106 |   margin-left: 84px;
107 |   height: 36px;
108 |   
109 | `
110 | 
111 | const Item = styled.div<{active?: boolean}>`
112 |   min-width: 80px;
113 |   font-family: 'Inter';
114 |   font-style: normal;
115 |   font-weight: 400;
116 |   font-size: 14px;
117 |   line-height: 24px;
118 |   text-align: center;
119 | 
120 |   background: ${ p => p.active ? 'linear-gradient(180deg, rgba(255, 255, 255, 0.3) 8.85%, #FFFFFF 100%);' : 'linear-gradient(180deg, rgba(255, 255, 255, 0.15) 8.85%, rgba(255, 255, 255, 0.5) 100%)'};
121 |   -webkit-background-clip: text;
122 |   -webkit-text-fill-color: transparent;
123 |   background-clip: text;
124 |   text-fill-color: transparent;
125 |   cursor: pointer;
126 |   position: relative;
127 |   border-top-left-radius: 6px;
128 |   border-top-right-radius: 6px;
129 | 
130 |   &:before {
131 |     content: '';
132 |     width: 100%;
133 |     height: 30px;
134 |     position: absolute;
135 |     border-top-left-radius: 6px;
136 |     border-top-right-radius: 6px;
137 |     top: -7px;
138 |     left: 0;
139 |     overflow: hidden;
140 |     /* background: radial-gradient(39% 100% at 38% 0%,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0) 100%), radial-gradient(100% 100% at 30.75% 0%,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 100%); */
141 |     background: radial-gradient(39% 100% at 48% -20%,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0) 100%),radial-gradient(100% 100% at 30.75% 0%,rgba(255,255,255,0.12) 60%,rgba(255,255,255,0) 100%);
142 |     transition: 300ms all;
143 |     opacity: ${p => p.active ? .5 : 0};
144 |     transition-delay: ${p => p.active ? '220ms' : '0'};
145 |   }
146 | `
147 | 
148 | const Content = styled.div`
149 |   display: flex;
150 |   align-items: center;
151 |   justify-content: center;
152 |   height: 165px;
153 | `
154 | 
155 | interface Props { 
156 |   children: React.ReactNode
157 |   m?: string
158 |   onActiveTabChange: (val: number) => void
159 | }
160 | 
161 | export default function Browser(props: Props) {
162 |   const TabsRef = useRef<HTMLDivElement | null>(null)
163 |   
164 |   const [left, setLeft] = useState(0);
165 |   const [right, setRight] = useState(0);
166 |   const refs = useRef<HTMLDivElement[]>([]);
167 |   const [activeTab, setActiveTab] = useState(1);
168 | 
169 |   useEffect(() => {
170 |     if (refs.current.length > 0) {
171 |       const activeRef = refs.current[activeTab - 1];
172 |       setLeft(activeRef.offsetLeft);
173 |       // @ts-ignore
174 |       setRight(activeRef.parentNode.parentNode.offsetWidth - (activeRef.offsetLeft + activeRef.offsetWidth));
175 | 
176 |       props.onActiveTabChange(activeTab)
177 |     }
178 |   }, [activeTab]);
179 | 
180 | 
181 |   return (
182 |     <Wrapper m={props.m}>
183 |       <BrowserPanel>
184 |         <Navigation>
185 |           <NavigatorLeftBG width={left} />
186 |           <Tabs ref={TabsRef}>
187 |             <Item ref={el => el && refs.current.push(el)} active={activeTab === 1} onClick={() => setActiveTab(1)}>Normal</Item>
188 |             <Item ref={el => el && refs.current.push(el)} active={activeTab === 2} onClick={() => setActiveTab(2)}>Loader</Item>
189 |             <Item ref={el => el && refs.current.push(el)} active={activeTab === 3} onClick={() => setActiveTab(3)}>Special</Item>
190 |           </Tabs>
191 |           <NavigatorRightBG width={right} />
192 |         </Navigation>
193 |         <Content>
194 |           {props.children}
195 |         </Content>
196 |       </BrowserPanel>
197 |     </Wrapper>
198 |   )
199 | }


--------------------------------------------------------------------------------
/pages/Normal.tsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import createSVGMask from "lib/createSVGMask";
  3 | import useElementSize from "lib/useElementSize";
  4 | import styled, { keyframes } from "styled-components";
  5 | 
  6 | const buttonHover = keyframes`
  7 |   to {
  8 |     --radialWidth: 120%;
  9 |     --radialLength: 85%;
 10 |   }
 11 | `
 12 | 
 13 | const buttonHoverOut = keyframes`
 14 |   from {
 15 |     --radialWidth: 120%;
 16 |     --radialLength: 85%;
 17 |   }
 18 |   to {
 19 |     --radialWidth: 40%;
 20 |     --radialLength: 10%;
 21 |   }
 22 | `
 23 | 
 24 | const Button = styled.button`
 25 |   --radialWidth: 40%;
 26 |   --radialLength: 10%;
 27 | 
 28 |   position: relative;
 29 |   font-family: "Inter";
 30 |   box-sizing: border-box;
 31 |   font-size: 14px;
 32 |   line-height: 24px;
 33 |   padding: 8px 16px;
 34 |   border: none;
 35 |   stroke: 0;
 36 |   -webkit-appearance: none;
 37 |   /* make this black if you want to rotating conic gradient */
 38 |   background-color: transparent;
 39 |   border-radius: 999px;
 40 |   cursor: pointer;
 41 |   /* opacity: .5; */
 42 |   &:before {
 43 |     content: "";
 44 |     width: calc(100% + 2px);
 45 |     height: calc(100% + 2px);
 46 |     position: absolute;
 47 |     top: -2px;
 48 |     left: -2px;
 49 |     border-radius: 999px;
 50 |     border: 1px solid rgba(255, 255, 255, 0.1);
 51 |   }
 52 |   
 53 |   &:after {
 54 |     content: "";
 55 |     width: calc(100% + 4px);
 56 |     height: calc(100% + 4px);
 57 |     position: absolute;
 58 |     left: -2px;
 59 |     top: -2px;
 60 |     opacity: 0;
 61 |     background: radial-gradient(var(--radialLength) var(--radialWidth) at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
 62 | 
 63 |     transition: 1s all;
 64 |     border-radius: 999px;
 65 |     animation: .4s ${buttonHoverOut} forwards;
 66 |   }
 67 |   
 68 |   &:hover { 
 69 |     &:after {
 70 |       content: "";
 71 |       opacity: .7;
 72 |       animation: .4s ${buttonHover} forwards;
 73 |     }
 74 |   }
 75 | 
 76 |   span {
 77 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 8.85%, #FFFFFF 100%);
 78 |     -webkit-background-clip: text;
 79 |     -webkit-text-fill-color: transparent;
 80 |     background-clip: text;
 81 |     text-fill-color: transparent;
 82 |   }
 83 | `
 84 | 
 85 | const ButtonWrapper = styled.div`
 86 |   position: relative;
 87 |   overflow: hidden;
 88 |   border-radius: 999px;
 89 |   padding: 2px 2px;
 90 |   display: inline-block;
 91 | 
 92 |   @property --border-angle {
 93 |     syntax: "<angle>";
 94 |     initial-value: 0turn;
 95 |     inherits: false;
 96 |   }
 97 | 
 98 |   @property --position {
 99 |     syntax: "<percentage>";
100 |     initial-value: 20%;
101 |     inherits: false;
102 |   }
103 | 
104 |   @property --radialWidth {
105 |     syntax: "<percentage>";
106 |     initial-value: 60%;
107 |     inherits: false;
108 |   }
109 | 
110 |   @property --radialLength {
111 |     syntax: "<percentage>";
112 |     initial-value: 10%;
113 |     inherits: false;
114 |   }
115 | `
116 | 
117 | const Border = styled.div<{size: number, buttonWidth: number, buttonHeight: number}>`
118 |   --border-size: 15px;
119 |   --border-angle: 0turn;
120 |   pointer-events: none;
121 |   background-image: 
122 |       conic-gradient(
123 |         from var(--border-angle) at 50% 50%,
124 |         rgba(255, 255, 255, 0.5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 0.5) 360deg);
125 |   background-size: calc(100% - (var(--border-size) * 2))
126 |       calc(100% - (var(--border-size) * 2)), 
127 |       cover;
128 |   position: absolute;
129 |   bottom: calc(50% - ${p => p.size / 2}px);
130 |   left: calc(50% - ${p => p.size / 2}px);
131 |   /* it should be square */
132 |   width: ${p => p.size}px;
133 |   height: ${p => p.size}px;
134 |   background-position: center center;
135 |   background-repeat: no-repeat;
136 |   
137 |   mask: url(${p => createSVGMask(p.buttonWidth + 4, p.buttonHeight + 4)});
138 |   mask-size: ${p => p.buttonWidth + 4}px ${p => p.buttonHeight + 4}px;
139 |   mask-position: center center;
140 |   mask-repeat: no-repeat;
141 |   mask-mode: alpha;
142 | `
143 | 
144 | const Glow = styled(Border)`
145 |   filter: blur(8px);
146 |   opacity: .15;
147 |   z-index: 5;
148 |   mask: none;
149 | `
150 | 
151 | const Stars = styled(Border)`
152 |   mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
153 |   mask-size: auto;
154 |   mask-repeat: repeat;
155 | `
156 | 
157 | interface Props {
158 |   noStar?: boolean
159 |   children?: React.ReactNode
160 | }
161 | 
162 | export default function NormalButton(props: Props) {
163 |   const [buttonRef, { width, height }] = useElementSize()
164 | 
165 |   function generateSquareMask() {
166 |     const dimensions = width + 50 // safe distance
167 |     
168 |     return dimensions
169 |   }
170 | 
171 |   return(
172 |     <div>
173 |       <ButtonWrapper>
174 |         <Border 
175 |           as={motion.div}
176 |           animate={{'--border-angle': ["0turn", "1turn"]} as any}
177 |           transition={{ repeat: Infinity, duration: 6, ease: "linear"}}
178 |           size={generateSquareMask()}
179 |           buttonWidth={width}
180 |           buttonHeight={height}
181 |         />
182 |         <Glow 
183 |           as={motion.div}
184 |           animate={{'--border-angle': ["0turn", "1turn"]} as any}
185 |           transition={{ repeat: Infinity, duration: 6, ease: "linear"}} 
186 |           size={generateSquareMask()}
187 |           buttonWidth={width}
188 |           buttonHeight={height}
189 |         />
190 |         {!props.noStar &&
191 |           <Stars
192 |             as={motion.div}
193 |             animate={{'--border-angle': ["0turn", "1turn"]} as any}
194 |             transition={{ repeat: Infinity, duration: 6, ease: "linear"}}
195 |             size={generateSquareMask()}
196 |             buttonWidth={width}
197 |             buttonHeight={height}
198 |           />
199 |         }
200 |         <Button ref={buttonRef}>
201 |           <span>
202 |             {props.children || 'Button'}
203 |           </span>
204 |         </Button>
205 |       </ButtonWrapper>
206 |     </div>
207 |   )
208 | }


--------------------------------------------------------------------------------
/pages/Loader.tsx:
--------------------------------------------------------------------------------
  1 | import { animate, motion, useAnimationControls, useMotionValue } from "framer-motion";
  2 | import createSVGMask from "lib/createSVGMask";
  3 | import useElementSize from "lib/useElementSize";
  4 | import { useEffect, useRef, useState } from "react";
  5 | import styled, { keyframes } from "styled-components";
  6 | 
  7 | 
  8 | const buttonHover = keyframes`
  9 |   to {
 10 |     --radialWidth: 120%;
 11 |     --radialLength: 85%;
 12 |   }
 13 | `
 14 | 
 15 | const buttonHoverOut = keyframes`
 16 |   from {
 17 |     --radialWidth: 120%;
 18 |     --radialLength: 85%;
 19 |   }
 20 |   to {
 21 |     --radialWidth: 40%;
 22 |     --radialLength: 10%;
 23 |   }
 24 | `
 25 | 
 26 | const Button = styled.button<{noBorder?: boolean}>`
 27 |   @property --border-angle {
 28 |     syntax: "<angle>";
 29 |     initial-value: 0turn;
 30 |     inherits: false;
 31 |   }
 32 | 
 33 |   @property --position {
 34 |     syntax: "<percentage>";
 35 |     initial-value: 20%;
 36 |     inherits: false;
 37 |   }
 38 | 
 39 |   @property --radialWidth {
 40 |     syntax: "<percentage>";
 41 |     initial-value: 60%;
 42 |     inherits: false;
 43 |   }
 44 | 
 45 |   @property --radialLength {
 46 |     syntax: "<percentage>";
 47 |     initial-value: 10%;
 48 |     inherits: false;
 49 |   }
 50 | 
 51 |   --radialWidth: 40%;
 52 |   --radialLength: 10%;
 53 | 
 54 |   position: relative;
 55 |   font-family: "Inter";
 56 |   box-sizing: border-box;
 57 |   font-size: 14px;
 58 |   line-height: 24px;
 59 |   width: 40px;
 60 |   min-height: 40px;
 61 |   padding: 8px 16px;
 62 |   border: none;
 63 |   stroke: 0;
 64 |   -webkit-appearance: none;
 65 |   /* make this black if you want to rotating conic gradient */
 66 |   background-color: transparent;
 67 |   border-radius: 999px;
 68 |   cursor: pointer;
 69 |   /* opacity: .5; */
 70 |   ${ p => !p.noBorder && `
 71 |     &:before {
 72 |       content: "";
 73 |       width: calc(100% + 2px);
 74 |       height: calc(100% + 2px);
 75 |       position: absolute;
 76 |       top: -2px;
 77 |       left: -2px;
 78 |       border-radius: 999px;
 79 |       border: 1px solid rgba(255, 255, 255, 0.1);
 80 |     }
 81 |   `}
 82 |   
 83 |   &:after {
 84 |     content: "";
 85 |     width: calc(100% + 4px);
 86 |     height: calc(100% + 4px);
 87 |     position: absolute;
 88 |     left: -2px;
 89 |     top: -2px;
 90 |     opacity: 0;
 91 |     background: radial-gradient(var(--radialLength) var(--radialWidth) at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
 92 | 
 93 |     transition: 1s all;
 94 |     border-radius: 999px;
 95 |     animation: .4s ${buttonHoverOut} forwards;
 96 |   }
 97 |   
 98 |   &:hover { 
 99 |     &:after {
100 |       content: "";
101 |       opacity: .7;
102 |       animation: .4s ${buttonHover} forwards;
103 |     }
104 |   }
105 | 
106 |   span {
107 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 8.85%, #FFFFFF 100%);
108 |     -webkit-background-clip: text;
109 |     -webkit-text-fill-color: transparent;
110 |     background-clip: text;
111 |     text-fill-color: transparent;
112 |   }
113 | `
114 | 
115 | const ButtonWrapper = styled.div`
116 |   position: relative;
117 |   overflow: hidden;
118 |   border-radius: 999px;
119 |   padding: 2px 2px;
120 | `
121 | 
122 | const Border = styled.div<{size: number, buttonWidth: number, buttonHeight: number}>`
123 |   --border-size: 15px;
124 |   --border-angle: 0turn;
125 |   pointer-events: none;
126 |   background-image: 
127 |       conic-gradient(
128 |         from var(--border-angle) at 50% 50%,
129 |         rgba(255, 255, 255, 0.5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 0.5) 360deg);
130 |   background-size: calc(100% - (var(--border-size) * 2))
131 |       calc(100% - (var(--border-size) * 2)), 
132 |       cover;
133 |   
134 |   position: absolute;
135 |   bottom: calc(50% - ${p => p.size / 2}px);
136 |   left: calc(50% - ${p => p.size / 2}px);
137 |   
138 |   /* it should be square */
139 |   width: ${p => p.size}px;
140 |   height: ${p => p.size}px;
141 |   
142 |   background-position: center;
143 |   background-repeat: no-repeat;
144 | 
145 |   mask: url(${p => createSVGMask(p.buttonWidth + 4, p.buttonHeight + 4)});
146 |   mask-size: ${p => p.buttonWidth + 4}px ${p => p.buttonHeight + 4}px;
147 |   mask-position: center;
148 |   mask-repeat: no-repeat;
149 |   mask-mode: alpha;
150 | `
151 | 
152 | const Glow = styled(Border)`
153 |   filter: blur(8px);
154 |   opacity: .15;
155 |   z-index: 5;
156 |   mask: none;
157 | `
158 | 
159 | const Stars = styled(Border)`
160 |   mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
161 |   mask-size: auto;
162 |   mask-repeat: repeat;
163 | `
164 | 
165 | interface Props { 
166 |   children?: React.ReactNode
167 |   noBorder?: boolean
168 |   noStar?: boolean
169 | }
170 | 
171 | export default function GradientButton(props: Props) {
172 |   const controls = useAnimationControls()
173 |   const turn = useMotionValue('0turn')
174 |   const [buttonRef, { width, height }] = useElementSize()
175 | 
176 |   useEffect(() => {
177 |     animate(turn, '1turn', {
178 |       repeat: Infinity,
179 |       duration: 6,
180 |       ease: "linear",
181 |     })
182 | 
183 |     return controls.stop
184 |   }, [])
185 | 
186 | 
187 |   function generateSquareMask() {
188 |     const dimensions = width + 50 // safe distance
189 |     
190 |     return dimensions
191 |   }
192 | 
193 |   const target = useRef<null | HTMLDivElement>(null)
194 | 
195 |   return(
196 |     <div ref={target}>
197 |       <ButtonWrapper>
198 |         <Border 
199 |           as={motion.div}
200 |           animate={controls}
201 |           style={{'--border-angle': turn} as any}
202 |           size={generateSquareMask()}
203 |           buttonWidth={width}
204 |           buttonHeight={height}
205 |         />
206 |         <Glow 
207 |           as={motion.div}
208 |           animate={controls}
209 |           style={{'--border-angle': turn} as any} 
210 |           size={generateSquareMask()}
211 |           buttonWidth={width}
212 |           buttonHeight={height}
213 |         />
214 |         {!props.noStar &&
215 |           <Stars 
216 |             as={motion.div}
217 |             animate={controls}
218 |             style={{'--border-angle': turn} as any} 
219 |             size={generateSquareMask()}
220 |             buttonWidth={width}
221 |             buttonHeight={height}
222 |           />
223 |         }
224 |         <Button noBorder={props.noBorder} ref={buttonRef}>{ props.children && <span>{props.children}</span>}</Button>
225 |       </ButtonWrapper>
226 |     </div>
227 |   )
228 | }


--------------------------------------------------------------------------------
/pages/Special.tsx:
--------------------------------------------------------------------------------
  1 | import { animate, motion, useAnimationControls, useMotionValue } from "framer-motion";
  2 | import createSVGMask from "lib/createSVGMask";
  3 | import useElementSize from "lib/useElementSize";
  4 | import { useEffect, useRef, useState } from "react";
  5 | import styled, { keyframes } from "styled-components";
  6 | 
  7 | const buttonHover = keyframes`
  8 |   to {
  9 |     --radialWidth: 120%;
 10 |     --radialLength: 85%;
 11 |   }
 12 | `
 13 | 
 14 | const buttonHoverOut = keyframes`
 15 |   from {
 16 |     --radialWidth: 120%;
 17 |     --radialLength: 85%;
 18 |   }
 19 |   to {
 20 |     --radialWidth: 40%;
 21 |     --radialLength: 10%;
 22 |   }
 23 | `
 24 | 
 25 | const ButtonWrapper = styled.div`
 26 |   position: relative;
 27 |   overflow: hidden;
 28 |   border-radius: 999px;
 29 |   padding: 2px 2px;
 30 | 
 31 |   @property --border-angle {
 32 |     syntax: "<angle>";
 33 |     initial-value: 0turn;
 34 |     inherits: false;
 35 |   }
 36 | 
 37 |   @property --position {
 38 |     syntax: "<percentage>";
 39 |     initial-value: 20%;
 40 |     inherits: false;
 41 |   }
 42 | 
 43 |   @property --radialWidth {
 44 |     syntax: "<percentage>";
 45 |     initial-value: 60%;
 46 |     inherits: false;
 47 |   }
 48 | 
 49 |   @property --radialLength {
 50 |     syntax: "<percentage>";
 51 |     initial-value: 10%;
 52 |     inherits: false;
 53 |   }
 54 | `
 55 | 
 56 | const Button = styled.button`
 57 |   --radialWidth: 40%;
 58 |   --radialLength: 10%;
 59 | 
 60 |   position: relative;
 61 |   font-family: "Inter";
 62 |   box-sizing: border-box;
 63 |   font-size: 14px;
 64 |   line-height: 24px;
 65 |   padding: 8px 16px;
 66 |   border: none;
 67 |   stroke: 0;
 68 |   -webkit-appearance: none;
 69 |   /* make this black if you want to rotating conic gradient */
 70 |   background-color: transparent;
 71 |   border-radius: 999px;
 72 |   cursor: pointer;
 73 |   /* opacity: .5; */
 74 |   &:before {
 75 |     content: "";
 76 |     width: calc(100% + 2px);
 77 |     height: calc(100% + 2px);
 78 |     position: absolute;
 79 |     top: -2px;
 80 |     left: -2px;
 81 |     border-radius: 999px;
 82 |     border: 1px solid rgba(255, 255, 255, 0.1);
 83 |   }
 84 |   
 85 |   &:after {
 86 |     content: "";
 87 |     width: calc(100% + 4px);
 88 |     height: calc(100% + 4px);
 89 |     position: absolute;
 90 |     left: -2px;
 91 |     top: -2px;
 92 |     opacity: 0;
 93 |     background: radial-gradient(var(--radialLength) var(--radialWidth) at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
 94 | 
 95 |     transition: 1s all;
 96 |     border-radius: 999px;
 97 |     animation: .4s ${buttonHoverOut} forwards;
 98 |   }
 99 |   
100 |   &:hover { 
101 |     &:after {
102 |       content: "";
103 |       opacity: .7;
104 |       animation: .4s ${buttonHover} forwards;
105 |     }
106 |   }
107 | 
108 |   span {
109 |     background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 8.85%, #FFFFFF 100%);
110 |     -webkit-background-clip: text;
111 |     -webkit-text-fill-color: transparent;
112 |     background-clip: text;
113 |     text-fill-color: transparent;
114 |   }
115 | `
116 | 
117 | const Border = styled.div<{size: number, buttonWidth: number, buttonHeight: number}>`
118 |   --border-size: 15px;
119 |   --border-angle: 0turn;
120 |   pointer-events: none;
121 |   background-image: 
122 |       conic-gradient(
123 |         from var(--border-angle) at 50% 50%,
124 |         rgba(255, 255, 255, 0.5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 0.5) 360deg);
125 |   background-size: calc(100% - (var(--border-size) * 2))
126 |       calc(100% - (var(--border-size) * 2)), 
127 |       cover;
128 |   position: absolute;
129 |   bottom: calc(50% - ${p => p.size / 2}px);
130 |   left: calc(50% - ${p => p.size / 2}px);
131 |   /* it should be square */
132 |   width: ${p => p.size}px;
133 |   height: ${p => p.size}px;
134 |   background-position: center center;
135 |   background-repeat: no-repeat;
136 |   
137 |   mask: url(${p => createSVGMask(p.buttonWidth + 4, p.buttonHeight + 4)});
138 |   mask-size: ${p => p.buttonWidth + 4}px ${p => p.buttonHeight + 4}px;
139 |   mask-position: center center;
140 |   mask-repeat: no-repeat;
141 |   mask-mode: alpha;
142 | `
143 | 
144 | const Glow = styled(Border)`
145 |   filter: blur(8px);
146 |   opacity: .15;
147 |   z-index: 5;
148 |   mask: none;
149 | `
150 | 
151 | const Stars = styled(Border)`
152 |   mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
153 |   mask-size: auto;
154 |   mask-repeat: repeat;
155 | `
156 | 
157 | interface Props {
158 |   noStar?: boolean
159 | }
160 | 
161 | export default function GradientButton(props: Props) {
162 |   const controls = useAnimationControls()
163 |   const turn = useMotionValue('0turn')
164 |   const [ duration, setDuration ] = useState(6)
165 |   const [buttonRef, { width, height }] = useElementSize()
166 | 
167 |   useEffect(() => {
168 |     const remaining = Number(turn.get().split('turn')[0])
169 |     // THIS WILL ONLY WORK WITH LINEAR EASINGS
170 |     const calculated = duration * (1 - remaining)
171 |     // if the turn has been completed start with 0
172 |     const currentTurn = turn.get() === '1turn'? '0turn': turn.get()
173 | 
174 |     controls.stop()
175 |     animate(turn, [currentTurn, '1turn'], {
176 |       duration: calculated || duration,
177 |       ease: "linear",
178 |       onComplete() {
179 |         prepareNextAnimation()
180 |       },
181 |     })
182 |     return controls.stop
183 |   }, [duration])
184 | 
185 |   function prepareNextAnimation(){
186 |     animate(turn, ['0turn', '1turn'], {
187 |       duration: duration,
188 |       ease: "linear",
189 |       repeat: Infinity
190 |     })
191 |   }
192 | 
193 |   const target = useRef<null | HTMLDivElement>(null)
194 | 
195 |   function calculateSpeed(x:number, y:number, maxSpeed = 6, minSpeed = 0.6) {
196 |     // Pythagorean
197 |     const distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
198 |     const speed = maxSpeed - ((distance / (window.innerWidth / 3)) * (maxSpeed - minSpeed));
199 |     return Math.max(Math.min(speed, maxSpeed), minSpeed);
200 |   }
201 | 
202 |   function generateSquareMask() {
203 |     const dimensions = width + 50 // safe distance
204 |     
205 |     return dimensions
206 |   }
207 | 
208 |   useEffect(() => {
209 |     const handleMouseMove = (event: any) => {
210 |       if(target.current){
211 |         const rect = target.current.getBoundingClientRect()
212 | 
213 |         const relativeX = event.clientX - rect.x
214 |         const relativeY = event.clientY - rect.y
215 | 
216 |         setDuration(calculateSpeed(relativeX, relativeY))
217 |       }
218 |     };
219 | 
220 |     window.addEventListener('mousemove', handleMouseMove);
221 | 
222 |     return () => {
223 |       window.removeEventListener(
224 |         'mousemove',
225 |         handleMouseMove
226 |       );
227 |     };
228 |   }, [target]);
229 | 
230 |   return(
231 |     <div ref={target}>
232 |       <ButtonWrapper>
233 |         <Border 
234 |           as={motion.div}
235 |           animate={controls}
236 |           style={{'--border-angle': turn} as any}
237 |           size={generateSquareMask()}
238 |           buttonWidth={width}
239 |           buttonHeight={height}
240 |         />
241 |         <Glow 
242 |           as={motion.div}
243 |           animate={controls}
244 |           style={{'--border-angle': turn} as any} 
245 |           size={generateSquareMask()}
246 |           buttonWidth={width}
247 |           buttonHeight={height}
248 |         />
249 |         { !props.noStar && 
250 |           <Stars 
251 |             as={motion.div}
252 |             animate={controls}
253 |             style={{'--border-angle': turn} as any} 
254 |             size={generateSquareMask()}
255 |             buttonWidth={width}
256 |             buttonHeight={height}
257 |           />
258 |         }
259 |         <Button ref={buttonRef}>
260 |           <span>
261 |             Button
262 |           </span>
263 |         </Button>
264 |       </ButtonWrapper>
265 |     </div>
266 |   )
267 | }


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@babel/code-frame@^7.18.6":
  6 |   version "7.18.6"
  7 |   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
  8 |   integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
  9 |   dependencies:
 10 |     "@babel/highlight" "^7.18.6"
 11 | 
 12 | "@babel/generator@^7.20.7":
 13 |   version "7.20.7"
 14 |   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a"
 15 |   integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==
 16 |   dependencies:
 17 |     "@babel/types" "^7.20.7"
 18 |     "@jridgewell/gen-mapping" "^0.3.2"
 19 |     jsesc "^2.5.1"
 20 | 
 21 | "@babel/helper-annotate-as-pure@^7.16.0":
 22 |   version "7.18.6"
 23 |   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
 24 |   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
 25 |   dependencies:
 26 |     "@babel/types" "^7.18.6"
 27 | 
 28 | "@babel/helper-environment-visitor@^7.18.9":
 29 |   version "7.18.9"
 30 |   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
 31 |   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 32 | 
 33 | "@babel/helper-function-name@^7.19.0":
 34 |   version "7.19.0"
 35 |   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
 36 |   integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
 37 |   dependencies:
 38 |     "@babel/template" "^7.18.10"
 39 |     "@babel/types" "^7.19.0"
 40 | 
 41 | "@babel/helper-hoist-variables@^7.18.6":
 42 |   version "7.18.6"
 43 |   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
 44 |   integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
 45 |   dependencies:
 46 |     "@babel/types" "^7.18.6"
 47 | 
 48 | "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
 49 |   version "7.18.6"
 50 |   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
 51 |   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
 52 |   dependencies:
 53 |     "@babel/types" "^7.18.6"
 54 | 
 55 | "@babel/helper-split-export-declaration@^7.18.6":
 56 |   version "7.18.6"
 57 |   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
 58 |   integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
 59 |   dependencies:
 60 |     "@babel/types" "^7.18.6"
 61 | 
 62 | "@babel/helper-string-parser@^7.19.4":
 63 |   version "7.19.4"
 64 |   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
 65 |   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 66 | 
 67 | "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
 68 |   version "7.19.1"
 69 |   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
 70 |   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 71 | 
 72 | "@babel/highlight@^7.18.6":
 73 |   version "7.18.6"
 74 |   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
 75 |   integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
 76 |   dependencies:
 77 |     "@babel/helper-validator-identifier" "^7.18.6"
 78 |     chalk "^2.0.0"
 79 |     js-tokens "^4.0.0"
 80 | 
 81 | "@babel/parser@^7.20.7":
 82 |   version "7.20.7"
 83 |   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
 84 |   integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
 85 | 
 86 | "@babel/template@^7.18.10":
 87 |   version "7.20.7"
 88 |   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
 89 |   integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
 90 |   dependencies:
 91 |     "@babel/code-frame" "^7.18.6"
 92 |     "@babel/parser" "^7.20.7"
 93 |     "@babel/types" "^7.20.7"
 94 | 
 95 | "@babel/traverse@^7.4.5":
 96 |   version "7.20.10"
 97 |   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.10.tgz#2bf98239597fcec12f842756f186a9dde6d09230"
 98 |   integrity sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==
 99 |   dependencies:
100 |     "@babel/code-frame" "^7.18.6"
101 |     "@babel/generator" "^7.20.7"
102 |     "@babel/helper-environment-visitor" "^7.18.9"
103 |     "@babel/helper-function-name" "^7.19.0"
104 |     "@babel/helper-hoist-variables" "^7.18.6"
105 |     "@babel/helper-split-export-declaration" "^7.18.6"
106 |     "@babel/parser" "^7.20.7"
107 |     "@babel/types" "^7.20.7"
108 |     debug "^4.1.0"
109 |     globals "^11.1.0"
110 | 
111 | "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.7":
112 |   version "7.20.7"
113 |   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
114 |   integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
115 |   dependencies:
116 |     "@babel/helper-string-parser" "^7.19.4"
117 |     "@babel/helper-validator-identifier" "^7.19.1"
118 |     to-fast-properties "^2.0.0"
119 | 
120 | "@emotion/is-prop-valid@^0.8.2":
121 |   version "0.8.8"
122 |   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
123 |   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
124 |   dependencies:
125 |     "@emotion/memoize" "0.7.4"
126 | 
127 | "@emotion/is-prop-valid@^1.1.0":
128 |   version "1.2.0"
129 |   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
130 |   integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
131 |   dependencies:
132 |     "@emotion/memoize" "^0.8.0"
133 | 
134 | "@emotion/memoize@0.7.4":
135 |   version "0.7.4"
136 |   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
137 |   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
138 | 
139 | "@emotion/memoize@^0.8.0":
140 |   version "0.8.0"
141 |   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
142 |   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
143 | 
144 | "@emotion/stylis@^0.8.4":
145 |   version "0.8.5"
146 |   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
147 |   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
148 | 
149 | "@emotion/unitless@^0.7.4":
150 |   version "0.7.5"
151 |   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
152 |   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
153 | 
154 | "@jridgewell/gen-mapping@^0.3.2":
155 |   version "0.3.2"
156 |   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
157 |   integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
158 |   dependencies:
159 |     "@jridgewell/set-array" "^1.0.1"
160 |     "@jridgewell/sourcemap-codec" "^1.4.10"
161 |     "@jridgewell/trace-mapping" "^0.3.9"
162 | 
163 | "@jridgewell/resolve-uri@3.1.0":
164 |   version "3.1.0"
165 |   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
166 |   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
167 | 
168 | "@jridgewell/set-array@^1.0.1":
169 |   version "1.1.2"
170 |   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
171 |   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
172 | 
173 | "@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
174 |   version "1.4.14"
175 |   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
176 |   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
177 | 
178 | "@jridgewell/trace-mapping@^0.3.9":
179 |   version "0.3.17"
180 |   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
181 |   integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
182 |   dependencies:
183 |     "@jridgewell/resolve-uri" "3.1.0"
184 |     "@jridgewell/sourcemap-codec" "1.4.14"
185 | 
186 | "@motionone/animation@^10.12.0":
187 |   version "10.15.1"
188 |   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
189 |   integrity sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==
190 |   dependencies:
191 |     "@motionone/easing" "^10.15.1"
192 |     "@motionone/types" "^10.15.1"
193 |     "@motionone/utils" "^10.15.1"
194 |     tslib "^2.3.1"
195 | 
196 | "@motionone/dom@10.12.0":
197 |   version "10.12.0"
198 |   resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
199 |   integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
200 |   dependencies:
201 |     "@motionone/animation" "^10.12.0"
202 |     "@motionone/generators" "^10.12.0"
203 |     "@motionone/types" "^10.12.0"
204 |     "@motionone/utils" "^10.12.0"
205 |     hey-listen "^1.0.8"
206 |     tslib "^2.3.1"
207 | 
208 | "@motionone/easing@^10.15.1":
209 |   version "10.15.1"
210 |   resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.15.1.tgz#95cf3adaef34da6deebb83940d8143ede3deb693"
211 |   integrity sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==
212 |   dependencies:
213 |     "@motionone/utils" "^10.15.1"
214 |     tslib "^2.3.1"
215 | 
216 | "@motionone/generators@^10.12.0":
217 |   version "10.15.1"
218 |   resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.15.1.tgz#dc6abb11139d1bafe758a41c134d4c753a9b871c"
219 |   integrity sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==
220 |   dependencies:
221 |     "@motionone/types" "^10.15.1"
222 |     "@motionone/utils" "^10.15.1"
223 |     tslib "^2.3.1"
224 | 
225 | "@motionone/types@^10.12.0", "@motionone/types@^10.15.1":
226 |   version "10.15.1"
227 |   resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.15.1.tgz#89441b54285012795cbba8612cbaa0fa420db3eb"
228 |   integrity sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==
229 | 
230 | "@motionone/utils@^10.12.0", "@motionone/utils@^10.15.1":
231 |   version "10.15.1"
232 |   resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.15.1.tgz#6b5f51bde75be88b5411e084310299050368a438"
233 |   integrity sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==
234 |   dependencies:
235 |     "@motionone/types" "^10.15.1"
236 |     hey-listen "^1.0.8"
237 |     tslib "^2.3.1"
238 | 
239 | "@next/env@12.2.5":
240 |   version "12.2.5"
241 |   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.5.tgz#d908c57b35262b94db3e431e869b72ac3e1ad3e3"
242 |   integrity sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw==
243 | 
244 | "@next/font@13.1.1":
245 |   version "13.1.1"
246 |   resolved "https://registry.yarnpkg.com/@next/font/-/font-13.1.1.tgz#a0cb38bf8a181560f195d82f13f9f92fd0b0dd20"
247 |   integrity sha512-amygRorS05hYK1/XQRZo5qBl7l2fpHnezeKU/cNveWU5QJg+sg8gMGkUXHtvesNKpiKIJshBRH1TzvO+2sKpvQ==
248 | 
249 | "@next/swc-android-arm-eabi@12.2.5":
250 |   version "12.2.5"
251 |   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.5.tgz#903a5479ab4c2705d9c08d080907475f7bacf94d"
252 |   integrity sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==
253 | 
254 | "@next/swc-android-arm64@12.2.5":
255 |   version "12.2.5"
256 |   resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.5.tgz#2f9a98ec4166c7860510963b31bda1f57a77c792"
257 |   integrity sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==
258 | 
259 | "@next/swc-darwin-arm64@12.2.5":
260 |   version "12.2.5"
261 |   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.5.tgz#31b1c3c659d54be546120c488a1e1bad21c24a1d"
262 |   integrity sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==
263 | 
264 | "@next/swc-darwin-x64@12.2.5":
265 |   version "12.2.5"
266 |   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.5.tgz#2e44dd82b2b7fef88238d1bc4d3bead5884cedfd"
267 |   integrity sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==
268 | 
269 | "@next/swc-freebsd-x64@12.2.5":
270 |   version "12.2.5"
271 |   resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.5.tgz#e24e75d8c2581bfebc75e4f08f6ddbd116ce9dbd"
272 |   integrity sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==
273 | 
274 | "@next/swc-linux-arm-gnueabihf@12.2.5":
275 |   version "12.2.5"
276 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.5.tgz#46d8c514d834d2b5f67086013f0bd5e3081e10b9"
277 |   integrity sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==
278 | 
279 | "@next/swc-linux-arm64-gnu@12.2.5":
280 |   version "12.2.5"
281 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.5.tgz#91f725ac217d3a1f4f9f53b553615ba582fd3d9f"
282 |   integrity sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==
283 | 
284 | "@next/swc-linux-arm64-musl@12.2.5":
285 |   version "12.2.5"
286 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.5.tgz#e627e8c867920995810250303cd9b8e963598383"
287 |   integrity sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==
288 | 
289 | "@next/swc-linux-x64-gnu@12.2.5":
290 |   version "12.2.5"
291 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz#83a5e224fbc4d119ef2e0f29d0d79c40cc43887e"
292 |   integrity sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==
293 | 
294 | "@next/swc-linux-x64-musl@12.2.5":
295 |   version "12.2.5"
296 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz#be700d48471baac1ec2e9539396625584a317e95"
297 |   integrity sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==
298 | 
299 | "@next/swc-win32-arm64-msvc@12.2.5":
300 |   version "12.2.5"
301 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.5.tgz#a93e958133ad3310373fda33a79aa10af2a0aa97"
302 |   integrity sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==
303 | 
304 | "@next/swc-win32-ia32-msvc@12.2.5":
305 |   version "12.2.5"
306 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.5.tgz#4f5f7ba0a98ff89a883625d4af0125baed8b2e19"
307 |   integrity sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==
308 | 
309 | "@next/swc-win32-x64-msvc@12.2.5":
310 |   version "12.2.5"
311 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz#20fed129b04a0d3f632c6d0de135345bb623b1e4"
312 |   integrity sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==
313 | 
314 | "@swc/helpers@0.4.3":
315 |   version "0.4.3"
316 |   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.3.tgz#16593dfc248c53b699d4b5026040f88ddb497012"
317 |   integrity sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==
318 |   dependencies:
319 |     tslib "^2.4.0"
320 | 
321 | "@types/hoist-non-react-statics@*":
322 |   version "3.3.1"
323 |   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
324 |   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
325 |   dependencies:
326 |     "@types/react" "*"
327 |     hoist-non-react-statics "^3.3.0"
328 | 
329 | "@types/node@18.11.18":
330 |   version "18.11.18"
331 |   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
332 |   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
333 | 
334 | "@types/prop-types@*":
335 |   version "15.7.5"
336 |   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
337 |   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
338 | 
339 | "@types/react-dom@17.0.2":
340 |   version "17.0.2"
341 |   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
342 |   integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
343 |   dependencies:
344 |     "@types/react" "*"
345 | 
346 | "@types/react@*":
347 |   version "18.0.26"
348 |   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
349 |   integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
350 |   dependencies:
351 |     "@types/prop-types" "*"
352 |     "@types/scheduler" "*"
353 |     csstype "^3.0.2"
354 | 
355 | "@types/react@17.0.2":
356 |   version "17.0.2"
357 |   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
358 |   integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
359 |   dependencies:
360 |     "@types/prop-types" "*"
361 |     csstype "^3.0.2"
362 | 
363 | "@types/scheduler@*":
364 |   version "0.16.2"
365 |   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
366 |   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
367 | 
368 | "@types/styled-components@^5.1.26":
369 |   version "5.1.26"
370 |   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
371 |   integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
372 |   dependencies:
373 |     "@types/hoist-non-react-statics" "*"
374 |     "@types/react" "*"
375 |     csstype "^3.0.2"
376 | 
377 | ansi-styles@^3.2.1:
378 |   version "3.2.1"
379 |   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
380 |   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
381 |   dependencies:
382 |     color-convert "^1.9.0"
383 | 
384 | "babel-plugin-styled-components@>= 1.12.0":
385 |   version "2.0.7"
386 |   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
387 |   integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
388 |   dependencies:
389 |     "@babel/helper-annotate-as-pure" "^7.16.0"
390 |     "@babel/helper-module-imports" "^7.16.0"
391 |     babel-plugin-syntax-jsx "^6.18.0"
392 |     lodash "^4.17.11"
393 |     picomatch "^2.3.0"
394 | 
395 | babel-plugin-syntax-jsx@^6.18.0:
396 |   version "6.18.0"
397 |   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
398 |   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
399 | 
400 | camelize@^1.0.0:
401 |   version "1.0.1"
402 |   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
403 |   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
404 | 
405 | caniuse-lite@^1.0.30001332:
406 |   version "1.0.30001441"
407 |   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
408 |   integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==
409 | 
410 | chalk@^2.0.0:
411 |   version "2.4.2"
412 |   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
413 |   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
414 |   dependencies:
415 |     ansi-styles "^3.2.1"
416 |     escape-string-regexp "^1.0.5"
417 |     supports-color "^5.3.0"
418 | 
419 | color-convert@^1.9.0:
420 |   version "1.9.3"
421 |   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
422 |   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
423 |   dependencies:
424 |     color-name "1.1.3"
425 | 
426 | color-name@1.1.3:
427 |   version "1.1.3"
428 |   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
429 |   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
430 | 
431 | css-color-keywords@^1.0.0:
432 |   version "1.0.0"
433 |   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
434 |   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
435 | 
436 | css-to-react-native@^3.0.0:
437 |   version "3.0.0"
438 |   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
439 |   integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
440 |   dependencies:
441 |     camelize "^1.0.0"
442 |     css-color-keywords "^1.0.0"
443 |     postcss-value-parser "^4.0.2"
444 | 
445 | csstype@^3.0.2:
446 |   version "3.1.1"
447 |   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
448 |   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
449 | 
450 | debug@^4.1.0:
451 |   version "4.3.4"
452 |   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
453 |   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
454 |   dependencies:
455 |     ms "2.1.2"
456 | 
457 | escape-string-regexp@^1.0.5:
458 |   version "1.0.5"
459 |   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
460 |   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
461 | 
462 | framer-motion@6.5.1:
463 |   version "6.5.1"
464 |   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
465 |   integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
466 |   dependencies:
467 |     "@motionone/dom" "10.12.0"
468 |     framesync "6.0.1"
469 |     hey-listen "^1.0.8"
470 |     popmotion "11.0.3"
471 |     style-value-types "5.0.0"
472 |     tslib "^2.1.0"
473 |   optionalDependencies:
474 |     "@emotion/is-prop-valid" "^0.8.2"
475 | 
476 | framesync@6.0.1:
477 |   version "6.0.1"
478 |   resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
479 |   integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
480 |   dependencies:
481 |     tslib "^2.1.0"
482 | 
483 | globals@^11.1.0:
484 |   version "11.12.0"
485 |   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
486 |   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
487 | 
488 | has-flag@^3.0.0:
489 |   version "3.0.0"
490 |   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
491 |   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
492 | 
493 | hey-listen@^1.0.8:
494 |   version "1.0.8"
495 |   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
496 |   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
497 | 
498 | hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
499 |   version "3.3.2"
500 |   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
501 |   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
502 |   dependencies:
503 |     react-is "^16.7.0"
504 | 
505 | "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
506 |   version "4.0.0"
507 |   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
508 |   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
509 | 
510 | jsesc@^2.5.1:
511 |   version "2.5.2"
512 |   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
513 |   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
514 | 
515 | lodash@^4.17.11:
516 |   version "4.17.21"
517 |   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
518 |   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
519 | 
520 | loose-envify@^1.1.0:
521 |   version "1.4.0"
522 |   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
523 |   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
524 |   dependencies:
525 |     js-tokens "^3.0.0 || ^4.0.0"
526 | 
527 | ms@2.1.2:
528 |   version "2.1.2"
529 |   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
530 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
531 | 
532 | nanoid@^3.3.4:
533 |   version "3.3.4"
534 |   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
535 |   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
536 | 
537 | next@12.2.5:
538 |   version "12.2.5"
539 |   resolved "https://registry.yarnpkg.com/next/-/next-12.2.5.tgz#14fb5975e8841fad09553b8ef41fe1393602b717"
540 |   integrity sha512-tBdjqX5XC/oFs/6gxrZhjmiq90YWizUYU6qOWAfat7zJwrwapJ+BYgX2PmiacunXMaRpeVT4vz5MSPSLgNkrpA==
541 |   dependencies:
542 |     "@next/env" "12.2.5"
543 |     "@swc/helpers" "0.4.3"
544 |     caniuse-lite "^1.0.30001332"
545 |     postcss "8.4.14"
546 |     styled-jsx "5.0.4"
547 |     use-sync-external-store "1.2.0"
548 |   optionalDependencies:
549 |     "@next/swc-android-arm-eabi" "12.2.5"
550 |     "@next/swc-android-arm64" "12.2.5"
551 |     "@next/swc-darwin-arm64" "12.2.5"
552 |     "@next/swc-darwin-x64" "12.2.5"
553 |     "@next/swc-freebsd-x64" "12.2.5"
554 |     "@next/swc-linux-arm-gnueabihf" "12.2.5"
555 |     "@next/swc-linux-arm64-gnu" "12.2.5"
556 |     "@next/swc-linux-arm64-musl" "12.2.5"
557 |     "@next/swc-linux-x64-gnu" "12.2.5"
558 |     "@next/swc-linux-x64-musl" "12.2.5"
559 |     "@next/swc-win32-arm64-msvc" "12.2.5"
560 |     "@next/swc-win32-ia32-msvc" "12.2.5"
561 |     "@next/swc-win32-x64-msvc" "12.2.5"
562 | 
563 | object-assign@^4.1.1:
564 |   version "4.1.1"
565 |   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
566 |   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
567 | 
568 | picocolors@^1.0.0:
569 |   version "1.0.0"
570 |   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
571 |   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
572 | 
573 | picomatch@^2.3.0:
574 |   version "2.3.1"
575 |   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
576 |   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
577 | 
578 | popmotion@11.0.3:
579 |   version "11.0.3"
580 |   resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
581 |   integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
582 |   dependencies:
583 |     framesync "6.0.1"
584 |     hey-listen "^1.0.8"
585 |     style-value-types "5.0.0"
586 |     tslib "^2.1.0"
587 | 
588 | postcss-value-parser@^4.0.2:
589 |   version "4.2.0"
590 |   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
591 |   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
592 | 
593 | postcss@8.4.14:
594 |   version "8.4.14"
595 |   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
596 |   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
597 |   dependencies:
598 |     nanoid "^3.3.4"
599 |     picocolors "^1.0.0"
600 |     source-map-js "^1.0.2"
601 | 
602 | react-dom@17.0.2:
603 |   version "17.0.2"
604 |   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
605 |   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
606 |   dependencies:
607 |     loose-envify "^1.1.0"
608 |     object-assign "^4.1.1"
609 |     scheduler "^0.20.2"
610 | 
611 | react-is@^16.7.0:
612 |   version "16.13.1"
613 |   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
614 |   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
615 | 
616 | react@17.0.2:
617 |   version "17.0.2"
618 |   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
619 |   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
620 |   dependencies:
621 |     loose-envify "^1.1.0"
622 |     object-assign "^4.1.1"
623 | 
624 | scheduler@^0.20.2:
625 |   version "0.20.2"
626 |   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
627 |   integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
628 |   dependencies:
629 |     loose-envify "^1.1.0"
630 |     object-assign "^4.1.1"
631 | 
632 | shallowequal@^1.1.0:
633 |   version "1.1.0"
634 |   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
635 |   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
636 | 
637 | source-map-js@^1.0.2:
638 |   version "1.0.2"
639 |   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
640 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
641 | 
642 | style-value-types@5.0.0:
643 |   version "5.0.0"
644 |   resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
645 |   integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
646 |   dependencies:
647 |     hey-listen "^1.0.8"
648 |     tslib "^2.1.0"
649 | 
650 | styled-components@5.3.5:
651 |   version "5.3.5"
652 |   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
653 |   integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
654 |   dependencies:
655 |     "@babel/helper-module-imports" "^7.0.0"
656 |     "@babel/traverse" "^7.4.5"
657 |     "@emotion/is-prop-valid" "^1.1.0"
658 |     "@emotion/stylis" "^0.8.4"
659 |     "@emotion/unitless" "^0.7.4"
660 |     babel-plugin-styled-components ">= 1.12.0"
661 |     css-to-react-native "^3.0.0"
662 |     hoist-non-react-statics "^3.0.0"
663 |     shallowequal "^1.1.0"
664 |     supports-color "^5.5.0"
665 | 
666 | styled-jsx@5.0.4:
667 |   version "5.0.4"
668 |   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.4.tgz#5b1bd0b9ab44caae3dd1361295559706e044aa53"
669 |   integrity sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==
670 | 
671 | supports-color@^5.3.0, supports-color@^5.5.0:
672 |   version "5.5.0"
673 |   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
674 |   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
675 |   dependencies:
676 |     has-flag "^3.0.0"
677 | 
678 | to-fast-properties@^2.0.0:
679 |   version "2.0.0"
680 |   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
681 |   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
682 | 
683 | tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
684 |   version "2.4.1"
685 |   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
686 |   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
687 | 
688 | typescript@4.9.4:
689 |   version "4.9.4"
690 |   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
691 |   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
692 | 
693 | use-sync-external-store@1.2.0:
694 |   version "1.2.0"
695 |   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
696 |   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
697 | 
698 | usehooks-ts@^2.9.1:
699 |   version "2.9.1"
700 |   resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
701 |   integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
702 | 


--------------------------------------------------------------------------------
/public/stars.svg:
--------------------------------------------------------------------------------
  1 | <svg width="1266" height="428" viewBox="0 0 1266 428" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 | <path d="M145.297 333.586C145.498 333.137 145.065 332.703 144.618 332.905C144.521 332.95 144.446 333.025 144.401 333.122C144.192 333.572 144.633 334.006 145.08 333.804C145.177 333.759 145.252 333.684 145.297 333.586Z" fill="white" fill-opacity="0.1"/>
  3 | <path d="M504.489 359.586C504.691 359.137 504.257 358.703 503.808 358.905C503.711 358.95 503.636 359.025 503.591 359.122C503.389 359.572 503.823 360.006 504.272 359.804C504.369 359.759 504.444 359.684 504.489 359.586Z" fill="white" fill-opacity="0.1"/>
  4 | <path d="M426.949 316.732C427.151 316.283 426.718 315.849 426.27 316.051C426.173 316.096 426.098 316.171 426.054 316.268C425.845 316.717 426.285 317.151 426.733 316.949C426.83 316.904 426.904 316.829 426.949 316.732Z" fill="white" fill-opacity="0.1"/>
  5 | <path d="M321.633 110.826C321.842 110.377 321.401 109.943 320.953 110.145C320.856 110.19 320.782 110.264 320.737 110.362C320.535 110.811 320.968 111.245 321.416 111.043C321.513 110.998 321.588 110.923 321.633 110.826Z" fill="white" fill-opacity="0.1"/>
  6 | <path d="M386.582 99.2996C386.791 98.8518 386.35 98.4114 385.903 98.6204C385.806 98.6652 385.731 98.7398 385.686 98.8368C385.485 99.2847 385.917 99.7176 386.365 99.5161C386.462 99.4713 386.537 99.3966 386.582 99.2996Z" fill="white" fill-opacity="0.1"/>
  7 | <path d="M1143.95 6.732C1144.15 6.28297 1143.72 5.84891 1143.27 6.05097C1143.17 6.09587 1143.1 6.17071 1143.05 6.268C1142.85 6.71703 1143.28 7.15109 1143.73 6.94903C1143.83 6.90413 1143.9 6.82929 1143.95 6.732Z" fill="white" fill-opacity="0.8"/>
  8 | <path d="M808.949 377.732C809.151 377.283 808.717 376.849 808.268 377.051C808.171 377.096 808.096 377.171 808.051 377.268C807.849 377.717 808.283 378.151 808.732 377.949C808.829 377.904 808.904 377.829 808.949 377.732Z" fill="white" fill-opacity="0.8"/>
  9 | <path d="M897.92 403.355C898.129 402.906 897.688 402.472 897.24 402.674C897.143 402.719 897.069 402.794 897.024 402.891C896.822 403.34 897.255 403.774 897.703 403.572C897.8 403.527 897.875 403.452 897.92 403.355Z" fill="white" fill-opacity="0.1"/>
 10 | <path d="M1081.65 301.125C1081.86 300.676 1081.42 300.242 1080.97 300.444C1080.87 300.489 1080.8 300.564 1080.75 300.661C1080.55 301.11 1080.98 301.544 1081.43 301.342C1081.53 301.297 1081.6 301.222 1081.65 301.125Z" fill="white" fill-opacity="0.1"/>
 11 | <path d="M1124.08 138.6C1124.29 138.151 1123.85 137.717 1123.4 137.919C1123.3 137.964 1123.23 138.038 1123.18 138.136C1122.98 138.585 1123.41 139.019 1123.86 138.817C1123.96 138.772 1124.03 138.697 1124.08 138.6Z" fill="white" fill-opacity="0.1"/>
 12 | <path d="M1080.74 15.9625C1080.94 15.5134 1080.51 15.0794 1080.06 15.2814C1079.96 15.3263 1079.89 15.4012 1079.84 15.4985C1079.63 15.9475 1080.07 16.3816 1080.52 16.1795C1080.62 16.1346 1080.69 16.0597 1080.74 15.9625Z" fill="white" fill-opacity="0.1"/>
 13 | <path d="M1155.95 45.732C1156.15 45.283 1155.72 44.8489 1155.27 45.051C1155.17 45.0959 1155.1 45.1707 1155.05 45.268C1154.85 45.717 1155.28 46.1511 1155.73 45.949C1155.83 45.9041 1155.9 45.8293 1155.95 45.732Z" fill="white" fill-opacity="0.1"/>
 14 | <path d="M1073.95 69.732C1074.16 69.283 1073.72 68.8489 1073.27 69.051C1073.17 69.0959 1073.1 69.1707 1073.05 69.268C1072.85 69.717 1073.28 70.1511 1073.73 69.949C1073.83 69.9041 1073.9 69.8293 1073.95 69.732Z" fill="white" fill-opacity="0.1"/>
 15 | <path d="M1075.95 176.732C1076.16 176.283 1075.72 175.849 1075.27 176.051C1075.17 176.096 1075.1 176.171 1075.05 176.268C1074.85 176.717 1075.28 177.151 1075.73 176.949C1075.83 176.904 1075.9 176.829 1075.95 176.732Z" fill="white" fill-opacity="0.1"/>
 16 | <path d="M1233.95 193.732C1234.15 193.283 1233.72 192.849 1233.27 193.051C1233.17 193.096 1233.1 193.171 1233.05 193.268C1232.84 193.717 1233.28 194.151 1233.73 193.949C1233.83 193.904 1233.9 193.829 1233.95 193.732Z" fill="white" fill-opacity="0.1"/>
 17 | <path d="M394.949 202.732C395.151 202.283 394.718 201.849 394.27 202.051C394.173 202.096 394.098 202.171 394.054 202.268C393.845 202.717 394.285 203.151 394.733 202.949C394.83 202.904 394.904 202.829 394.949 202.732Z" fill="white" fill-opacity="0.1"/>
 18 | <path d="M647.949 351.732C648.151 351.283 647.717 350.849 647.268 351.051C647.171 351.096 647.096 351.171 647.051 351.268C646.849 351.717 647.283 352.151 647.732 351.949C647.829 351.904 647.904 351.829 647.949 351.732Z" fill="white" fill-opacity="0.1"/>
 19 | <path d="M512.325 312.774C512.534 312.324 512.094 311.89 511.646 312.092C511.549 312.137 511.474 312.212 511.429 312.31C511.228 312.759 511.661 313.193 512.108 312.991C512.205 312.946 512.28 312.871 512.325 312.774Z" fill="white" fill-opacity="0.1"/>
 20 | <path d="M257.8 372.509C258.002 372.06 257.569 371.626 257.121 371.828C257.024 371.873 256.949 371.948 256.905 372.045C256.696 372.494 257.136 372.928 257.584 372.726C257.681 372.681 257.755 372.607 257.8 372.509Z" fill="white" fill-opacity="0.1"/>
 21 | <path d="M859.946 8.73199C860.155 8.28296 859.715 7.84891 859.267 8.05097C859.17 8.09588 859.096 8.17071 859.051 8.268C858.849 8.71703 859.282 9.15109 859.73 8.94903C859.827 8.90413 859.902 8.82928 859.946 8.73199Z" fill="white" fill-opacity="0.8"/>
 22 | <path d="M396.949 405.732C397.151 405.283 396.718 404.849 396.27 405.051C396.173 405.096 396.098 405.171 396.054 405.268C395.845 405.717 396.285 406.151 396.733 405.949C396.83 405.904 396.904 405.829 396.949 405.732Z" fill="white" fill-opacity="0.8"/>
 23 | <path d="M264.946 54.732C265.155 54.283 264.715 53.8489 264.267 54.051C264.17 54.0959 264.096 54.1707 264.051 54.268C263.849 54.717 264.282 55.1511 264.73 54.949C264.827 54.9041 264.902 54.8293 264.946 54.732Z" fill="white" fill-opacity="0.1"/>
 24 | <path d="M387.949 17.732C388.151 17.283 387.718 16.8489 387.27 17.051C387.173 17.0959 387.098 17.1707 387.054 17.268C386.845 17.717 387.285 18.1511 387.733 17.949C387.83 17.9041 387.904 17.8293 387.949 17.732Z" fill="white" fill-opacity="0.8"/>
 25 | <path d="M98.949 278.732C99.1511 278.283 98.717 277.849 98.268 278.051C98.1707 278.096 98.0959 278.171 98.051 278.268C97.8489 278.717 98.283 279.151 98.732 278.949C98.8293 278.904 98.9041 278.829 98.949 278.732Z" fill="white" fill-opacity="0.8"/>
 26 | <path d="M158.568 258.878C158.777 258.429 158.337 257.995 157.889 258.197C157.792 258.242 157.717 258.317 157.672 258.414C157.471 258.864 157.904 259.298 158.352 259.096C158.449 259.051 158.523 258.976 158.568 258.878Z" fill="white" fill-opacity="0.1"/>
 27 | <path d="M166.949 142.732C167.151 142.283 166.717 141.849 166.268 142.051C166.171 142.096 166.096 142.171 166.051 142.268C165.849 142.717 166.283 143.151 166.732 142.949C166.829 142.904 166.904 142.829 166.949 142.732Z" fill="white" fill-opacity="0.1"/>
 28 | <path d="M159.949 195.732C160.151 195.283 159.718 194.849 159.27 195.051C159.173 195.096 159.098 195.171 159.054 195.268C158.845 195.717 159.285 196.151 159.733 195.949C159.83 195.904 159.904 195.829 159.949 195.732Z" fill="white" fill-opacity="0.1"/>
 29 | <path d="M249.849 409.91C250.05 409.461 249.617 409.027 249.169 409.229C249.072 409.274 248.998 409.348 248.953 409.446C248.744 409.895 249.184 410.329 249.632 410.127C249.729 410.082 249.804 410.007 249.849 409.91Z" fill="white" fill-opacity="0.8"/>
 30 | <path d="M386.239 260.462C386.441 260.013 386.007 259.579 385.558 259.781C385.46 259.826 385.385 259.901 385.341 259.998C385.138 260.447 385.573 260.881 386.022 260.679C386.119 260.634 386.194 260.559 386.239 260.462Z" fill="white" fill-opacity="0.1"/>
 31 | <path d="M352.63 220.359C352.832 219.91 352.398 219.476 351.949 219.678C351.852 219.723 351.777 219.798 351.732 219.895C351.53 220.344 351.964 220.779 352.413 220.576C352.51 220.532 352.585 220.457 352.63 220.359Z" fill="white" fill-opacity="0.8"/>
 32 | <path d="M219.268 146.949C219.717 147.151 220.151 146.718 219.949 146.27C219.904 146.173 219.829 146.098 219.732 146.054C219.283 145.845 218.849 146.285 219.051 146.733C219.096 146.83 219.171 146.904 219.268 146.949Z" fill="white" fill-opacity="0.8"/>
 33 | <path d="M261.342 297.273C261.543 296.823 261.11 296.389 260.663 296.591C260.565 296.636 260.491 296.711 260.446 296.809C260.237 297.258 260.677 297.692 261.125 297.49C261.222 297.445 261.297 297.37 261.342 297.273Z" fill="white" fill-opacity="0.1"/>
 34 | <path d="M576.949 340.732C577.151 340.283 576.718 339.849 576.27 340.051C576.173 340.096 576.098 340.171 576.054 340.268C575.845 340.717 576.285 341.151 576.733 340.949C576.83 340.904 576.904 340.829 576.949 340.732Z" fill="white" fill-opacity="0.1"/>
 35 | <path d="M715.949 417.73C716.151 417.282 715.718 416.849 715.27 417.051C715.173 417.096 715.098 417.17 715.054 417.267C714.845 417.715 715.285 418.155 715.733 417.946C715.83 417.902 715.904 417.827 715.949 417.73Z" fill="white" fill-opacity="0.1"/>
 36 | <path d="M647.949 386.732C648.151 386.283 647.717 385.849 647.268 386.051C647.171 386.096 647.096 386.171 647.051 386.268C646.849 386.717 647.283 387.151 647.732 386.949C647.829 386.904 647.904 386.829 647.949 386.732Z" fill="white" fill-opacity="0.8"/>
 37 | <path d="M950.405 247.695C950.606 247.246 950.173 246.812 949.726 247.014C949.628 247.059 949.554 247.134 949.509 247.231C949.3 247.68 949.74 248.114 950.188 247.912C950.285 247.867 950.36 247.792 950.405 247.695Z" fill="white" fill-opacity="0.8"/>
 38 | <path d="M379.398 88.5215C379.599 88.0725 379.167 87.6385 378.719 87.8405C378.622 87.8854 378.547 87.9603 378.502 88.0576C378.293 88.5066 378.734 88.9406 379.181 88.7386C379.278 88.6937 379.353 88.6188 379.398 88.5215Z" fill="white" fill-opacity="0.1"/>
 39 | <path d="M1022.25 107.756C1022.45 107.307 1022.02 106.873 1021.57 107.075C1021.47 107.12 1021.4 107.195 1021.35 107.292C1021.14 107.741 1021.59 108.175 1022.03 107.973C1022.13 107.928 1022.2 107.853 1022.25 107.756Z" fill="white" fill-opacity="0.1"/>
 40 | <path d="M1036.97 25.1666C1037.17 24.7187 1036.74 24.2858 1036.29 24.4874C1036.2 24.5321 1036.12 24.6068 1036.08 24.7038C1035.87 25.1516 1036.31 25.592 1036.76 25.383C1036.85 25.3382 1036.93 25.2636 1036.97 25.1666Z" fill="white" fill-opacity="0.1"/>
 41 | <path d="M968.048 207.22C968.249 206.771 967.816 206.337 967.369 206.539C967.272 206.584 967.197 206.659 967.152 206.756C966.943 207.205 967.384 207.639 967.831 207.437C967.928 207.392 968.003 207.317 968.048 207.22Z" fill="white" fill-opacity="0.1"/>
 42 | <path d="M96.9492 8.73004C97.1507 8.28222 96.7178 7.84931 96.27 8.05084C96.1729 8.09562 96.0983 8.17026 96.0535 8.26729C95.8445 8.71512 96.2849 9.15548 96.7327 8.9465C96.8297 8.90172 96.9044 8.82707 96.9492 8.73004Z" fill="white" fill-opacity="0.1"/>
 43 | <path d="M1160.73 78.0535C1160.28 77.8445 1159.85 78.2849 1160.05 78.7327C1160.1 78.8297 1160.17 78.9044 1160.27 78.9492C1160.72 79.1507 1161.15 78.7178 1160.95 78.27C1160.9 78.1729 1160.83 78.0983 1160.73 78.0535Z" fill="white" fill-opacity="0.1"/>
 44 | <path d="M656.946 19.732C657.155 19.283 656.715 18.8489 656.267 19.051C656.17 19.0959 656.096 19.1707 656.051 19.268C655.849 19.717 656.282 20.1511 656.73 19.949C656.827 19.9041 656.902 19.8293 656.946 19.732Z" fill="white" fill-opacity="0.1"/>
 45 | <path d="M504.597 281.184C504.8 280.735 504.365 280.301 503.916 280.503C503.819 280.548 503.744 280.623 503.699 280.72C503.497 281.169 503.931 281.603 504.38 281.401C504.478 281.356 504.553 281.281 504.597 281.184Z" fill="white" fill-opacity="0.1"/>
 46 | <path d="M565.027 32.0631C565.229 31.6152 564.796 31.1823 564.348 31.3838C564.251 31.4286 564.176 31.5033 564.132 31.6003C563.923 32.0481 564.363 32.4885 564.811 32.2795C564.908 32.2347 564.983 32.1601 565.027 32.0631Z" fill="white" fill-opacity="0.1"/>
 47 | <path d="M994.946 312.732C995.155 312.283 994.715 311.849 994.267 312.051C994.17 312.096 994.096 312.171 994.051 312.268C993.849 312.717 994.282 313.151 994.73 312.949C994.827 312.904 994.902 312.829 994.946 312.732Z" fill="white" fill-opacity="0.8"/>
 48 | <path d="M144.108 46.8829C144.317 46.4339 143.877 45.9998 143.429 46.2019C143.332 46.2468 143.257 46.3216 143.212 46.4189C143.011 46.8679 143.444 47.302 143.892 47.0999C143.989 47.055 144.063 46.9802 144.108 46.8829Z" fill="white" fill-opacity="0.8"/>
 49 | <path d="M0.949028 57.732C1.15109 57.283 0.717025 56.8489 0.26799 57.051C0.1707 57.0959 0.0958773 57.1707 0.0509739 57.268C-0.151091 57.717 0.282955 58.1511 0.731989 57.949C0.829279 57.9041 0.904125 57.8293 0.949028 57.732Z" fill="white" fill-opacity="0.1"/>
 50 | <path d="M148.309 94.8956C148.511 94.4465 148.077 94.0125 147.628 94.2145C147.531 94.2594 147.456 94.3343 147.411 94.4316C147.209 94.8806 147.643 95.3147 148.092 95.1126C148.19 95.0677 148.264 94.9929 148.309 94.8956Z" fill="white" fill-opacity="0.1"/>
 51 | <path d="M450.59 32.732C450.792 32.283 450.358 31.8489 449.909 32.051C449.812 32.0959 449.737 32.1707 449.692 32.268C449.49 32.717 449.924 33.1511 450.373 32.949C450.47 32.9041 450.545 32.8293 450.59 32.732Z" fill="white" fill-opacity="0.1"/>
 52 | <path d="M475.341 427.298C475.55 426.849 475.109 426.415 474.661 426.617C474.564 426.662 474.49 426.737 474.445 426.834C474.243 427.283 474.676 427.717 475.124 427.515C475.221 427.47 475.296 427.395 475.341 427.298V427.298Z" fill="white" fill-opacity="0.1"/>
 53 | <path d="M1115.95 413.732C1116.15 413.283 1115.72 412.849 1115.27 413.051C1115.17 413.096 1115.1 413.171 1115.05 413.268C1114.85 413.717 1115.28 414.151 1115.73 413.949C1115.83 413.904 1115.9 413.829 1115.95 413.732Z" fill="white" fill-opacity="0.1"/>
 54 | <path d="M799.633 68.1802C799.835 67.7312 799.402 67.2972 798.954 67.4992C798.857 67.5441 798.782 67.619 798.738 67.7162C798.529 68.1653 798.969 68.5993 799.417 68.3973C799.514 68.3524 799.588 68.2775 799.633 68.1802Z" fill="white" fill-opacity="0.1"/>
 55 | <path d="M840.021 38.3599C840.23 37.9109 839.79 37.4768 839.342 37.6789C839.245 37.7238 839.17 37.7986 839.126 37.8959C838.924 38.345 839.357 38.779 839.805 38.577C839.902 38.5321 839.976 38.4572 840.021 38.3599Z" fill="white" fill-opacity="0.1"/>
 56 | <path d="M182.949 232.732C183.151 232.283 182.718 231.849 182.27 232.051C182.173 232.096 182.098 232.171 182.054 232.268C181.845 232.717 182.285 233.151 182.733 232.949C182.83 232.904 182.904 232.829 182.949 232.732Z" fill="white" fill-opacity="0.1"/>
 57 | <path d="M431.581 86.627C431.783 86.178 431.349 85.7439 430.9 85.946C430.803 85.9909 430.728 86.0657 430.683 86.163C430.481 86.6121 430.915 87.0461 431.364 86.844C431.461 86.7991 431.536 86.7243 431.581 86.627Z" fill="white" fill-opacity="0.1"/>
 58 | <path d="M894.751 314.203C894.96 313.754 894.52 313.32 894.072 313.522C893.975 313.567 893.9 313.642 893.856 313.739C893.654 314.188 894.087 314.622 894.535 314.42C894.632 314.375 894.706 314.3 894.751 314.203Z" fill="white" fill-opacity="0.1"/>
 59 | <path d="M1109.95 260.732C1110.16 260.283 1109.72 259.849 1109.27 260.051C1109.17 260.096 1109.1 260.171 1109.05 260.268C1108.85 260.717 1109.28 261.151 1109.73 260.949C1109.83 260.904 1109.9 260.829 1109.95 260.732Z" fill="white" fill-opacity="0.8"/>
 60 | <path d="M1122.02 203.243C1122.22 202.794 1121.79 202.36 1121.34 202.562C1121.24 202.607 1121.17 202.682 1121.12 202.779C1120.92 203.228 1121.35 203.662 1121.8 203.46C1121.9 203.415 1121.97 203.341 1122.02 203.243Z" fill="white" fill-opacity="0.1"/>
 61 | <path d="M361.051 167.732C360.849 167.283 361.283 166.849 361.732 167.051C361.829 167.096 361.904 167.171 361.949 167.268C362.151 167.717 361.717 168.151 361.268 167.949C361.171 167.904 361.096 167.829 361.051 167.732Z" fill="white" fill-opacity="0.1"/>
 62 | <path d="M680.051 373.732C679.849 373.283 680.283 372.849 680.732 373.051C680.829 373.096 680.904 373.171 680.949 373.268C681.151 373.717 680.717 374.151 680.268 373.949C680.171 373.904 680.096 373.829 680.051 373.732Z" fill="white" fill-opacity="0.1"/>
 63 | <path d="M302.051 358.709C301.849 358.26 302.282 357.825 302.73 358.028C302.827 358.072 302.902 358.147 302.946 358.245C303.155 358.694 302.715 359.128 302.267 358.926C302.17 358.881 302.096 358.806 302.051 358.709Z" fill="white" fill-opacity="0.1"/>
 64 | <path d="M586.051 375.732C585.849 375.283 586.283 374.849 586.732 375.051C586.829 375.096 586.904 375.171 586.949 375.268C587.151 375.717 586.717 376.151 586.268 375.949C586.171 375.904 586.096 375.829 586.051 375.732Z" fill="white" fill-opacity="0.1"/>
 65 | <path d="M715.051 389.73C714.849 389.282 715.282 388.849 715.73 389.051C715.827 389.096 715.902 389.17 715.946 389.267C716.155 389.715 715.715 390.155 715.267 389.946C715.17 389.902 715.096 389.827 715.051 389.73Z" fill="white" fill-opacity="0.1"/>
 66 | <path d="M259.957 272.795C259.756 272.346 260.188 271.912 260.636 272.114C260.733 272.159 260.808 272.234 260.853 272.331C261.062 272.78 260.621 273.214 260.174 273.012C260.077 272.967 260.002 272.892 259.957 272.795Z" fill="white" fill-opacity="0.1"/>
 67 | <path d="M203.268 110.054C203.717 109.845 204.151 110.285 203.949 110.733C203.904 110.83 203.829 110.904 203.732 110.949C203.283 111.151 202.849 110.718 203.051 110.27C203.096 110.173 203.171 110.098 203.268 110.054Z" fill="white" fill-opacity="0.1"/>
 68 | <path d="M114.051 260.975C113.849 260.526 114.282 260.092 114.73 260.294C114.827 260.339 114.902 260.413 114.946 260.511C115.155 260.96 114.715 261.394 114.267 261.192C114.17 261.147 114.096 261.072 114.051 260.975Z" fill="white" fill-opacity="0.1"/>
 69 | <path d="M919.338 31.899C919.129 31.45 919.57 31.0159 920.017 31.218C920.114 31.2629 920.189 31.3377 920.234 31.435C920.435 31.884 920.002 32.3181 919.555 32.116C919.458 32.0711 919.383 31.9963 919.338 31.899Z" fill="white" fill-opacity="0.8"/>
 70 | <path d="M1034.55 301.188C1034.35 300.74 1034.79 300.3 1035.23 300.509C1035.33 300.553 1035.41 300.628 1035.45 300.725C1035.65 301.173 1035.22 301.606 1034.77 301.404C1034.67 301.359 1034.6 301.285 1034.55 301.188Z" fill="white" fill-opacity="0.1"/>
 71 | <path d="M1071.33 345.701C1071.12 345.252 1071.56 344.818 1072.01 345.02C1072.11 345.065 1072.18 345.139 1072.23 345.237C1072.43 345.686 1072 346.12 1071.55 345.918C1071.45 345.873 1071.38 345.798 1071.33 345.701Z" fill="white" fill-opacity="0.8"/>
 72 | <path d="M1162.05 126.732C1161.85 126.283 1162.28 125.849 1162.73 126.051C1162.83 126.096 1162.9 126.171 1162.95 126.268C1163.16 126.717 1162.72 127.151 1162.27 126.949C1162.17 126.904 1162.1 126.829 1162.05 126.732Z" fill="white" fill-opacity="0.1"/>
 73 | <path d="M1138.49 98.4034C1138.28 97.9544 1138.72 97.5203 1139.16 97.7224C1139.26 97.7673 1139.34 97.8421 1139.38 97.9394C1139.58 98.3884 1139.15 98.8225 1138.7 98.6204C1138.61 98.5755 1138.53 98.5007 1138.49 98.4034Z" fill="white" fill-opacity="0.8"/>
 74 | <path d="M1069.05 233.732C1068.84 233.283 1069.28 232.849 1069.73 233.051C1069.83 233.096 1069.9 233.171 1069.95 233.268C1070.15 233.717 1069.72 234.151 1069.27 233.949C1069.17 233.904 1069.1 233.829 1069.05 233.732Z" fill="white" fill-opacity="0.1"/>
 75 | <path d="M762.051 0.732002C761.849 0.282973 762.282 -0.151092 762.73 0.0509715C762.827 0.0958745 762.902 0.170708 762.946 0.267997C763.155 0.717027 762.715 1.15109 762.267 0.949028C762.17 0.904125 762.096 0.829292 762.051 0.732002Z" fill="white" fill-opacity="0.1"/>
 76 | <path d="M738.414 11.2095C738.212 10.7605 738.646 10.3264 739.095 10.5285C739.193 10.5734 739.267 10.6483 739.312 10.7455C739.514 11.1946 739.08 11.6286 738.631 11.4266C738.534 11.3817 738.459 11.3068 738.414 11.2095Z" fill="white" fill-opacity="0.1"/>
 77 | <path d="M187.014 340.731C186.812 340.282 187.246 339.847 187.695 340.05C187.793 340.094 187.868 340.169 187.912 340.267C188.114 340.716 187.68 341.15 187.231 340.948C187.134 340.903 187.059 340.828 187.014 340.731Z" fill="white" fill-opacity="0.1"/>
 78 | <path d="M65.0535 217.733C64.8445 217.285 65.2849 216.845 65.7327 217.054C65.8297 217.098 65.9044 217.173 65.9492 217.27C66.1507 217.718 65.7178 218.151 65.27 217.949C65.1729 217.904 65.0983 217.83 65.0535 217.733Z" fill="white" fill-opacity="0.1"/>
 79 | <path d="M100.045 197.155C99.8362 196.706 100.277 196.272 100.724 196.474C100.821 196.519 100.896 196.594 100.941 196.691C101.142 197.14 100.709 197.574 100.262 197.372C100.165 197.327 100.09 197.252 100.045 197.155Z" fill="white" fill-opacity="0.8"/>
 80 | <path d="M275.212 219.883C275.011 219.434 275.444 219 275.892 219.202C275.989 219.247 276.063 219.322 276.108 219.419C276.317 219.868 275.877 220.302 275.429 220.1C275.332 220.055 275.257 219.98 275.212 219.883Z" fill="white" fill-opacity="0.1"/>
 81 | <path d="M23.0508 112.732C22.8493 112.283 23.2822 111.849 23.7301 112.051C23.8271 112.096 23.9017 112.171 23.9465 112.268C24.1555 112.717 23.7151 113.151 23.2673 112.949C23.1703 112.904 23.0956 112.829 23.0508 112.732Z" fill="white" fill-opacity="0.1"/>
 82 | <path d="M1181.98 170.688C1181.78 170.239 1182.21 169.805 1182.66 170.007C1182.76 170.052 1182.83 170.127 1182.88 170.224C1183.08 170.673 1182.64 171.107 1182.2 170.905C1182.1 170.86 1182.02 170.785 1181.98 170.688Z" fill="white" fill-opacity="0.1"/>
 83 | <path d="M1227.07 136.181C1226.62 136.384 1226.19 135.949 1226.39 135.5C1226.44 135.403 1226.51 135.328 1226.61 135.283C1227.06 135.081 1227.49 135.515 1227.29 135.964C1227.24 136.062 1227.17 136.137 1227.07 136.181Z" fill="white" fill-opacity="0.8"/>
 84 | <path d="M1202.73 103.946C1202.28 104.155 1201.85 103.715 1202.05 103.267C1202.1 103.17 1202.17 103.096 1202.27 103.051C1202.72 102.849 1203.15 103.282 1202.95 103.73C1202.9 103.827 1202.83 103.902 1202.73 103.946Z" fill="white" fill-opacity="0.1"/>
 85 | <path d="M810.88 19.1622C810.678 18.7131 811.112 18.2791 811.561 18.4811C811.658 18.5261 811.733 18.6009 811.778 18.6982C811.98 19.1472 811.546 19.5813 811.097 19.3792C811 19.3343 810.925 19.2595 810.88 19.1622Z" fill="white" fill-opacity="0.1"/>
 86 | <path d="M210.321 204.641C210.12 204.192 210.553 203.758 211.001 203.96C211.098 204.005 211.172 204.079 211.217 204.177C211.426 204.626 210.986 205.06 210.538 204.858C210.441 204.813 210.366 204.738 210.321 204.641Z" fill="white" fill-opacity="0.1"/>
 87 | <path d="M506.051 11.732C505.849 11.283 506.283 10.8489 506.732 11.051C506.829 11.0959 506.904 11.1707 506.949 11.268C507.151 11.717 506.717 12.1511 506.268 11.949C506.171 11.9041 506.096 11.8293 506.051 11.732Z" fill="white" fill-opacity="0.1"/>
 88 | <path d="M453.399 69.7296C453.198 69.2805 453.631 68.8465 454.079 69.0485C454.176 69.0934 454.25 69.1683 454.295 69.2656C454.504 69.7146 454.064 70.1487 453.616 69.9466C453.519 69.9017 453.444 69.8269 453.399 69.7296Z" fill="white" fill-opacity="0.1"/>
 89 | <path d="M547.729 70.0133C547.527 69.5642 547.961 69.1302 548.41 69.3322C548.507 69.3771 548.582 69.452 548.627 69.5492C548.829 69.9983 548.395 70.4323 547.946 70.2303C547.848 70.1854 547.774 70.1105 547.729 70.0133Z" fill="white" fill-opacity="0.1"/>
 90 | <path d="M383.576 362.529C383.374 362.08 383.808 361.646 384.257 361.848C384.354 361.893 384.429 361.968 384.474 362.065C384.676 362.514 384.242 362.948 383.793 362.746C383.696 362.701 383.621 362.626 383.576 362.529Z" fill="white" fill-opacity="0.1"/>
 91 | <path d="M1064.56 367.714C1064.35 367.265 1064.79 366.831 1065.24 367.033C1065.33 367.078 1065.41 367.153 1065.45 367.25C1065.65 367.699 1065.22 368.134 1064.77 367.931C1064.68 367.887 1064.6 367.812 1064.56 367.714Z" fill="white" fill-opacity="0.8"/>
 92 | <path d="M554.051 386.732C553.849 386.283 554.283 385.849 554.732 386.051C554.829 386.096 554.904 386.171 554.949 386.268C555.151 386.717 554.717 387.151 554.268 386.949C554.171 386.904 554.096 386.829 554.051 386.732Z" fill="white" fill-opacity="0.1"/>
 93 | <path d="M622.051 415.732C621.849 415.283 622.283 414.849 622.732 415.051C622.829 415.096 622.904 415.171 622.949 415.268C623.151 415.717 622.717 416.151 622.268 415.949C622.171 415.904 622.096 415.829 622.051 415.732Z" fill="white" fill-opacity="0.8"/>
 94 | <path d="M743.633 347.493C743.43 347.044 743.865 346.61 744.314 346.812C744.411 346.857 744.486 346.931 744.531 347.029C744.733 347.478 744.299 347.912 743.85 347.71C743.752 347.665 743.677 347.59 743.633 347.493Z" fill="white" fill-opacity="0.8"/>
 95 | <path d="M502.051 391.732C501.849 391.283 502.283 390.849 502.732 391.051C502.829 391.096 502.904 391.171 502.949 391.268C503.151 391.717 502.717 392.151 502.268 391.949C502.171 391.904 502.096 391.829 502.051 391.732Z" fill="white" fill-opacity="0.8"/>
 96 | <path d="M543.051 426.732C542.849 426.283 543.282 425.849 543.73 426.051C543.827 426.096 543.902 426.171 543.946 426.268C544.155 426.717 543.715 427.151 543.267 426.949C543.17 426.904 543.096 426.829 543.051 426.732V426.732Z" fill="white" fill-opacity="0.1"/>
 97 | <path d="M269.051 84.732C268.849 84.283 269.282 83.8489 269.73 84.051C269.827 84.0959 269.902 84.1707 269.946 84.268C270.155 84.717 269.715 85.1511 269.267 84.949C269.17 84.9041 269.096 84.8293 269.051 84.732Z" fill="white" fill-opacity="0.1"/>
 98 | <path d="M857.39 353.715C857.188 353.266 857.621 352.832 858.069 353.034C858.166 353.079 858.241 353.154 858.285 353.251C858.494 353.7 858.054 354.134 857.606 353.932C857.509 353.888 857.434 353.813 857.39 353.715Z" fill="white" fill-opacity="0.1"/>
 99 | <path d="M822.945 340.969C822.736 340.52 823.176 340.086 823.624 340.288C823.721 340.333 823.795 340.408 823.84 340.505C824.042 340.954 823.609 341.388 823.161 341.186C823.064 341.141 822.989 341.067 822.945 340.969Z" fill="white" fill-opacity="0.1"/>
100 | <path d="M998.054 160.733C997.845 160.285 998.285 159.845 998.733 160.054C998.83 160.098 998.904 160.173 998.949 160.27C999.151 160.718 998.718 161.151 998.27 160.949C998.173 160.904 998.098 160.83 998.054 160.733Z" fill="white" fill-opacity="0.1"/>
101 | <path d="M929.69 58.2398C929.488 57.7908 929.922 57.3567 930.371 57.5588C930.468 57.6037 930.543 57.6785 930.588 57.7758C930.79 58.2248 930.356 58.6589 929.907 58.4568C929.809 58.4119 929.735 58.3371 929.69 58.2398Z" fill="white" fill-opacity="0.8"/>
102 | <path d="M877.051 71.732C876.849 71.283 877.282 70.8489 877.73 71.051C877.827 71.0959 877.902 71.1707 877.946 71.268C878.155 71.717 877.715 72.1511 877.267 71.949C877.17 71.9041 877.096 71.8293 877.051 71.732Z" fill="white" fill-opacity="0.1"/>
103 | <path d="M948.894 353.397C948.692 352.948 949.126 352.514 949.575 352.716C949.672 352.761 949.747 352.836 949.792 352.933C949.994 353.382 949.56 353.816 949.111 353.614C949.013 353.569 948.939 353.494 948.894 353.397Z" fill="white" fill-opacity="0.1"/>
104 | <path d="M935.47 93.5904C935.261 93.1414 935.701 92.7073 936.149 92.9094C936.246 92.9543 936.32 93.0291 936.365 93.1264C936.567 93.5754 936.134 94.0095 935.686 93.8074C935.589 93.7625 935.514 93.6877 935.47 93.5904Z" fill="white" fill-opacity="0.1"/>
105 | <path d="M992.051 54.7301C991.849 54.2822 992.282 53.8493 992.73 54.0508C992.827 54.0956 992.902 54.1703 992.946 54.2673C993.155 54.7151 992.715 55.1555 992.267 54.9465C992.17 54.9017 992.096 54.8271 992.051 54.7301Z" fill="white" fill-opacity="0.1"/>
106 | <path d="M1038.6 243.996C1038.4 243.547 1038.83 243.113 1039.28 243.315C1039.38 243.36 1039.45 243.435 1039.5 243.532C1039.71 243.981 1039.27 244.415 1038.82 244.213C1038.72 244.168 1038.65 244.093 1038.6 243.996Z" fill="white" fill-opacity="0.1"/>
107 | <path d="M1012.81 196.254C1012.61 195.805 1013.04 195.371 1013.49 195.573C1013.59 195.618 1013.66 195.693 1013.71 195.79C1013.91 196.239 1013.48 196.673 1013.03 196.471C1012.93 196.426 1012.85 196.351 1012.81 196.254Z" fill="white" fill-opacity="0.1"/>
108 | <path d="M1126.05 310.732C1125.84 310.283 1126.28 309.849 1126.73 310.051C1126.83 310.096 1126.9 310.171 1126.95 310.268C1127.15 310.717 1126.72 311.151 1126.27 310.949C1126.17 310.904 1126.1 310.829 1126.05 310.732Z" fill="white" fill-opacity="0.1"/>
109 | <path d="M990.051 271.732C989.849 271.283 990.282 270.849 990.73 271.051C990.827 271.096 990.902 271.171 990.946 271.268C991.155 271.717 990.715 272.151 990.267 271.949C990.17 271.904 990.096 271.829 990.051 271.732Z" fill="white" fill-opacity="0.1"/>
110 | <path d="M1156.76 279.412C1156.56 278.963 1156.99 278.529 1157.44 278.731C1157.53 278.776 1157.61 278.85 1157.65 278.948C1157.86 279.397 1157.42 279.831 1156.97 279.629C1156.88 279.584 1156.8 279.509 1156.76 279.412Z" fill="white" fill-opacity="0.1"/>
111 | <path d="M205.898 279.488C205.697 279.039 206.13 278.605 206.578 278.807C206.675 278.852 206.749 278.927 206.794 279.024C207.003 279.473 206.563 279.907 206.115 279.705C206.018 279.66 205.943 279.586 205.898 279.488Z" fill="white" fill-opacity="0.1"/>
112 | <path d="M999.218 357.774C999.016 357.324 999.45 356.89 999.899 357.092C999.997 357.137 1000.07 357.212 1000.12 357.31C1000.32 357.759 999.885 358.193 999.435 357.991C999.338 357.946 999.263 357.871 999.218 357.774Z" fill="white" fill-opacity="0.1"/>
113 | <path d="M760.051 386.732C759.849 386.283 760.283 385.849 760.732 386.051C760.829 386.096 760.904 386.171 760.949 386.268C761.151 386.717 760.717 387.151 760.268 386.949C760.171 386.904 760.096 386.829 760.051 386.732Z" fill="white" fill-opacity="0.1"/>
114 | <path d="M983.905 405.91C983.696 405.461 984.136 405.027 984.584 405.229C984.681 405.274 984.755 405.348 984.8 405.446C985.002 405.895 984.569 406.329 984.121 406.127C984.024 406.082 983.949 406.007 983.905 405.91Z" fill="white" fill-opacity="0.8"/>
115 | <path d="M854.095 103.732C854.304 103.283 853.864 102.849 853.416 103.051C853.319 103.096 853.245 103.171 853.2 103.268C852.998 103.717 853.431 104.151 853.879 103.949C853.976 103.904 854.051 103.829 854.095 103.732Z" fill="white" fill-opacity="0.8"/>
116 | <path d="M975.098 204.732C975.3 204.283 974.866 203.849 974.417 204.051C974.32 204.096 974.245 204.171 974.2 204.268C973.998 204.717 974.432 205.151 974.881 204.949C974.978 204.904 975.053 204.829 975.098 204.732Z" fill="white" fill-opacity="0.1"/>
117 | <path d="M930.48 136.701C930.271 136.252 930.712 135.818 931.159 136.02C931.257 136.065 931.331 136.139 931.376 136.237C931.577 136.686 931.145 137.12 930.697 136.918C930.6 136.873 930.525 136.798 930.48 136.701Z" fill="white" fill-opacity="0.8"/>
118 | <path d="M923.706 158.714C923.497 158.265 923.937 157.831 924.385 158.033C924.482 158.078 924.557 158.153 924.602 158.25C924.803 158.699 924.37 159.134 923.922 158.931C923.825 158.887 923.751 158.812 923.706 158.714Z" fill="white" fill-opacity="0.8"/>
119 | <path d="M985.202 101.732C984.993 101.283 985.434 100.849 985.882 101.051C985.979 101.096 986.053 101.171 986.098 101.268C986.3 101.717 985.867 102.151 985.419 101.949C985.322 101.904 985.247 101.829 985.202 101.732Z" fill="white" fill-opacity="0.1"/>
120 | <path d="M858.367 148.774C858.165 148.324 858.599 147.89 859.048 148.092C859.146 148.137 859.221 148.212 859.265 148.31C859.467 148.759 859.033 149.193 858.584 148.991C858.487 148.946 858.412 148.871 858.367 148.774Z" fill="white" fill-opacity="0.1"/>
121 | <path d="M843.054 196.91C842.845 196.461 843.285 196.027 843.733 196.229C843.83 196.274 843.904 196.348 843.949 196.446C844.151 196.895 843.718 197.329 843.27 197.127C843.173 197.082 843.098 197.007 843.054 196.91Z" fill="white" fill-opacity="0.8"/>
122 | <path d="M928.232 291.744C928.023 291.295 928.464 290.861 928.911 291.063C929.008 291.108 929.083 291.182 929.128 291.28C929.329 291.729 928.897 292.163 928.449 291.961C928.352 291.916 928.277 291.841 928.232 291.744Z" fill="white" fill-opacity="0.1"/>
123 | <path d="M1184.87 234.99C1184.67 234.541 1185.1 234.107 1185.55 234.309C1185.64 234.354 1185.72 234.429 1185.76 234.526C1185.97 234.975 1185.53 235.409 1185.09 235.207C1184.99 235.162 1184.91 235.087 1184.87 234.99Z" fill="white" fill-opacity="0.1"/>
124 | <path d="M1265.73 76.9465C1265.28 77.1555 1264.85 76.7151 1265.05 76.2673C1265.1 76.1703 1265.17 76.0956 1265.27 76.0508C1265.72 75.8493 1266.15 76.2822 1265.95 76.73C1265.9 76.8271 1265.83 76.9017 1265.73 76.9465Z" fill="white" fill-opacity="0.1"/>
125 | <path d="M776.265 140.732C776.467 140.283 776.033 139.849 775.584 140.051C775.487 140.096 775.412 140.171 775.367 140.268C775.165 140.717 775.599 141.151 776.048 140.949C776.145 140.904 776.22 140.829 776.265 140.732Z" fill="white" fill-opacity="0.8"/>
126 | <path d="M756.393 272.6C756.602 272.151 756.161 271.717 755.714 271.919C755.617 271.964 755.542 272.038 755.497 272.136C755.296 272.585 755.729 273.019 756.176 272.817C756.273 272.772 756.348 272.697 756.393 272.6Z" fill="white" fill-opacity="0.1"/>
127 | <path d="M713.054 149.962C713.255 149.513 712.822 149.079 712.374 149.281C712.277 149.326 712.203 149.401 712.158 149.498C711.949 149.947 712.389 150.382 712.837 150.179C712.934 150.135 713.009 150.06 713.054 149.962Z" fill="white" fill-opacity="0.1"/>
128 | <path d="M788.265 179.732C788.467 179.283 788.033 178.849 787.584 179.051C787.487 179.096 787.412 179.171 787.367 179.268C787.165 179.717 787.599 180.151 788.048 179.949C788.145 179.904 788.22 179.829 788.265 179.732Z" fill="white" fill-opacity="0.1"/>
129 | <path d="M538.946 238.732C539.155 238.283 538.715 237.849 538.267 238.051C538.17 238.096 538.096 238.171 538.051 238.268C537.849 238.717 538.282 239.151 538.73 238.949C538.827 238.904 538.902 238.829 538.946 238.732Z" fill="white" fill-opacity="0.1"/>
130 | <path d="M708.262 310.732C708.471 310.283 708.031 309.849 707.583 310.051C707.486 310.096 707.412 310.171 707.367 310.268C707.165 310.717 707.598 311.151 708.046 310.949C708.143 310.904 708.218 310.829 708.262 310.732Z" fill="white" fill-opacity="0.1"/>
131 | <path d="M866.265 327.732C866.467 327.283 866.034 326.849 865.586 327.051C865.489 327.096 865.414 327.171 865.369 327.268C865.16 327.717 865.601 328.151 866.049 327.949C866.146 327.904 866.22 327.829 866.265 327.732Z" fill="white" fill-opacity="0.1"/>
132 | <path d="M492.262 142.732C492.471 142.283 492.031 141.849 491.583 142.051C491.486 142.096 491.412 142.171 491.367 142.268C491.165 142.717 491.598 143.151 492.046 142.949C492.143 142.904 492.218 142.829 492.262 142.732Z" fill="white" fill-opacity="0.8"/>
133 | <path d="M487.249 276.756C487.451 276.307 487.018 275.873 486.57 276.075C486.473 276.12 486.399 276.195 486.354 276.292C486.145 276.741 486.585 277.175 487.033 276.973C487.13 276.928 487.205 276.853 487.249 276.756Z" fill="white" fill-opacity="0.1"/>
134 | <path d="M669.289 159.167C669.49 158.719 669.057 158.286 668.609 158.487C668.512 158.532 668.438 158.607 668.393 158.704C668.184 159.152 668.624 159.592 669.072 159.383C669.169 159.338 669.244 159.264 669.289 159.167Z" fill="white" fill-opacity="0.1"/>
135 | <path d="M600.364 341.22C600.565 340.771 600.132 340.337 599.685 340.539C599.587 340.584 599.513 340.659 599.468 340.756C599.259 341.205 599.699 341.639 600.147 341.437C600.244 341.392 600.319 341.317 600.364 341.22Z" fill="white" fill-opacity="0.1"/>
136 | <path d="M793.048 212.054C792.599 211.845 792.165 212.285 792.367 212.733C792.412 212.83 792.487 212.904 792.584 212.949C793.033 213.151 793.467 212.718 793.265 212.27C793.22 212.173 793.145 212.098 793.048 212.054Z" fill="white" fill-opacity="0.1"/>
137 | <path d="M431.949 202.18C432.151 201.731 431.718 201.297 431.27 201.499C431.173 201.544 431.098 201.619 431.054 201.716C430.845 202.165 431.285 202.599 431.733 202.397C431.83 202.352 431.904 202.278 431.949 202.18Z" fill="white" fill-opacity="0.1"/>
138 | <path d="M472.337 172.36C472.546 171.911 472.106 171.477 471.658 171.679C471.561 171.724 471.486 171.799 471.441 171.896C471.24 172.345 471.673 172.779 472.121 172.577C472.218 172.532 472.292 172.457 472.337 172.36Z" fill="white" fill-opacity="0.1"/>
139 | <path d="M754.334 337.243C754.536 336.794 754.102 336.36 753.653 336.562C753.556 336.607 753.481 336.682 753.436 336.779C753.234 337.228 753.668 337.662 754.117 337.46C754.215 337.415 754.289 337.341 754.334 337.243Z" fill="white" fill-opacity="0.1"/>
140 | <path d="M551.654 165.899C551.445 165.45 551.885 165.016 552.333 165.218C552.43 165.263 552.505 165.338 552.55 165.435C552.751 165.884 552.318 166.318 551.871 166.116C551.774 166.071 551.699 165.996 551.654 165.899Z" fill="white" fill-opacity="0.8"/>
141 | <path d="M794.367 260.732C794.165 260.283 794.598 259.849 795.046 260.051C795.143 260.096 795.218 260.171 795.262 260.268C795.471 260.717 795.031 261.151 794.583 260.949C794.486 260.904 794.412 260.829 794.367 260.732Z" fill="white" fill-opacity="0.1"/>
142 | <path d="M770.802 232.403C770.593 231.954 771.033 231.52 771.481 231.722C771.578 231.767 771.652 231.842 771.697 231.939C771.899 232.388 771.466 232.822 771.018 232.62C770.921 232.576 770.846 232.501 770.802 232.403Z" fill="white" fill-opacity="0.8"/>
143 | <path d="M814.295 304.688C814.094 304.239 814.527 303.805 814.975 304.007C815.072 304.052 815.146 304.127 815.191 304.224C815.4 304.673 814.96 305.107 814.512 304.905C814.415 304.86 814.34 304.785 814.295 304.688Z" fill="white" fill-opacity="0.1"/>
144 | <path d="M859.387 270.181C858.938 270.384 858.504 269.949 858.706 269.5C858.751 269.403 858.826 269.328 858.923 269.283C859.372 269.081 859.806 269.515 859.604 269.964C859.559 270.062 859.485 270.137 859.387 270.181Z" fill="white" fill-opacity="0.8"/>
145 | <path d="M835.048 237.946C834.599 238.155 834.165 237.715 834.367 237.267C834.412 237.17 834.487 237.096 834.584 237.051C835.033 236.849 835.467 237.282 835.265 237.73C835.22 237.827 835.145 237.902 835.048 237.946Z" fill="white" fill-opacity="0.1"/>
146 | <path d="M443.196 153.162C442.994 152.713 443.428 152.279 443.877 152.481C443.974 152.526 444.049 152.601 444.094 152.698C444.296 153.147 443.862 153.581 443.413 153.379C443.316 153.334 443.241 153.259 443.196 153.162Z" fill="white" fill-opacity="0.1"/>
147 | <path d="M630.369 294.733C630.16 294.285 630.601 293.845 631.049 294.054C631.146 294.098 631.22 294.173 631.265 294.27C631.467 294.718 631.034 295.151 630.586 294.949C630.489 294.904 630.414 294.83 630.369 294.733Z" fill="white" fill-opacity="0.1"/>
148 | <path d="M562.006 192.24C561.803 191.791 562.238 191.357 562.687 191.559C562.784 191.604 562.859 191.679 562.904 191.776C563.106 192.225 562.672 192.659 562.223 192.457C562.125 192.412 562.05 192.337 562.006 192.24Z" fill="white" fill-opacity="0.8"/>
149 | <path d="M509.367 205.732C509.165 205.283 509.598 204.849 510.046 205.051C510.143 205.096 510.218 205.171 510.262 205.268C510.471 205.717 510.031 206.151 509.583 205.949C509.486 205.904 509.412 205.829 509.367 205.732Z" fill="white" fill-opacity="0.1"/>
150 | <path d="M567.785 227.59C567.576 227.141 568.017 226.707 568.465 226.909C568.562 226.954 568.636 227.029 568.681 227.126C568.883 227.575 568.45 228.009 568.002 227.807C567.905 227.763 567.83 227.688 567.785 227.59Z" fill="white" fill-opacity="0.1"/>
151 | <path d="M457.051 223.73C456.849 223.282 457.282 222.849 457.73 223.051C457.827 223.096 457.902 223.17 457.946 223.267C458.155 223.715 457.715 224.155 457.267 223.946C457.17 223.902 457.096 223.827 457.051 223.73Z" fill="white" fill-opacity="0.1"/>
152 | <path d="M645.125 330.254C644.923 329.805 645.357 329.371 645.806 329.573C645.904 329.618 645.978 329.693 646.023 329.79C646.225 330.239 645.791 330.673 645.342 330.471C645.245 330.426 645.17 330.351 645.125 330.254Z" fill="white" fill-opacity="0.1"/>
153 | <path d="M898.048 210.946C897.599 211.155 897.165 210.715 897.367 210.267C897.412 210.17 897.487 210.096 897.584 210.051C898.033 209.849 898.467 210.282 898.265 210.73C898.22 210.827 898.145 210.902 898.048 210.946Z" fill="white" fill-opacity="0.1"/>
154 | <path d="M228.054 244.732C227.845 244.283 228.285 243.849 228.733 244.051C228.83 244.096 228.904 244.171 228.949 244.268C229.151 244.717 228.718 245.151 228.27 244.949C228.173 244.904 228.098 244.829 228.054 244.732Z" fill="white" fill-opacity="0.1"/>
155 | <path d="M433.054 390.732C432.845 390.283 433.285 389.849 433.733 390.051C433.83 390.096 433.904 390.171 433.949 390.268C434.151 390.717 433.718 391.151 433.27 390.949C433.173 390.904 433.098 390.829 433.054 390.732Z" fill="white" fill-opacity="0.1"/>
156 | <path d="M336.054 385.732C335.845 385.283 336.285 384.849 336.733 385.051C336.83 385.096 336.904 385.171 336.949 385.268C337.151 385.717 336.718 386.151 336.27 385.949C336.173 385.904 336.098 385.829 336.054 385.732Z" fill="white" fill-opacity="0.8"/>
157 | <path d="M429.054 353.732C428.845 353.283 429.285 352.849 429.733 353.051C429.83 353.096 429.904 353.171 429.949 353.268C430.151 353.717 429.718 354.151 429.27 353.949C429.173 353.904 429.098 353.829 429.054 353.732Z" fill="white" fill-opacity="0.1"/>
158 | <path d="M312.215 273.883C312.006 273.434 312.447 273 312.894 273.202C312.991 273.247 313.066 273.322 313.111 273.419C313.312 273.868 312.879 274.302 312.432 274.1C312.335 274.055 312.26 273.98 312.215 273.883Z" fill="white" fill-opacity="0.1"/>
159 | <path d="M427.928 271.8C427.719 271.351 428.159 270.917 428.607 271.119C428.704 271.164 428.779 271.239 428.824 271.336C429.025 271.785 428.592 272.219 428.144 272.017C428.047 271.972 427.973 271.898 427.928 271.8Z" fill="white" fill-opacity="0.1"/>
160 | <path d="M360.585 332.126C360.383 331.677 360.817 331.243 361.266 331.445C361.363 331.49 361.438 331.565 361.483 331.662C361.685 332.111 361.251 332.545 360.802 332.343C360.704 332.298 360.63 332.223 360.585 332.126Z" fill="white" fill-opacity="0.1"/>
161 | <path d="M722.949 42.732C723.151 42.283 722.718 41.8489 722.27 42.051C722.173 42.0959 722.098 42.1707 722.054 42.268C721.845 42.717 722.285 43.1511 722.733 42.949C722.83 42.9041 722.904 42.8293 722.949 42.732Z" fill="white" fill-opacity="0.1"/>
162 | <path d="M692.949 131.732C693.151 131.283 692.718 130.849 692.27 131.051C692.173 131.096 692.098 131.171 692.054 131.268C691.845 131.717 692.285 132.151 692.733 131.949C692.83 131.904 692.904 131.829 692.949 131.732Z" fill="white" fill-opacity="0.8"/>
163 | <path d="M598.051 84.7086C597.849 84.2595 598.282 83.8255 598.73 84.0275C598.827 84.0724 598.902 84.1473 598.946 84.2446C599.155 84.6936 598.715 85.1277 598.267 84.9256C598.17 84.8807 598.096 84.8058 598.051 84.7086Z" fill="white" fill-opacity="0.1"/>
164 | <path d="M679.576 88.5289C679.374 88.0798 679.808 87.6458 680.257 87.8478C680.354 87.8927 680.429 87.9676 680.474 88.0649C680.676 88.5139 680.242 88.948 679.793 88.7459C679.696 88.701 679.621 88.6262 679.576 88.5289Z" fill="white" fill-opacity="0.1"/>
165 | <path d="M729.054 116.732C728.845 116.283 729.285 115.849 729.733 116.051C729.83 116.096 729.904 116.171 729.949 116.268C730.151 116.717 729.718 117.151 729.27 116.949C729.173 116.904 729.098 116.829 729.054 116.732Z" fill="white" fill-opacity="0.1"/>
166 | <path d="M632.054 111.732C631.845 111.283 632.285 110.849 632.733 111.051C632.83 111.096 632.904 111.171 632.949 111.268C633.151 111.717 632.718 112.151 632.27 111.949C632.173 111.904 632.098 111.829 632.054 111.732Z" fill="white" fill-opacity="0.8"/>
167 | <path d="M725.054 79.732C724.845 79.283 725.285 78.8489 725.733 79.051C725.83 79.0959 725.904 79.1707 725.949 79.268C726.151 79.717 725.718 80.1511 725.27 79.949C725.173 79.9041 725.098 79.8293 725.054 79.732Z" fill="white" fill-opacity="0.1"/>
168 | <path d="M656.585 58.126C656.383 57.677 656.817 57.243 657.266 57.445C657.363 57.4899 657.438 57.5648 657.483 57.662C657.685 58.1111 657.251 58.5451 656.802 58.3431C656.704 58.2982 656.63 58.2233 656.585 58.126Z" fill="white" fill-opacity="0.1"/>
169 | <path d="M199.315 314.265C199.113 313.816 199.547 313.382 199.996 313.584C200.093 313.629 200.168 313.704 200.213 313.801C200.415 314.25 199.981 314.684 199.532 314.482C199.434 314.437 199.36 314.362 199.315 314.265Z" fill="white" fill-opacity="0.8"/>
170 | <path d="M83.051 77.732C82.8489 77.283 83.283 76.8489 83.732 77.051C83.8293 77.0959 83.9041 77.1707 83.949 77.268C84.1511 77.717 83.717 78.1511 83.268 77.949C83.1707 77.9041 83.0959 77.8293 83.051 77.732Z" fill="white" fill-opacity="0.1"/>
171 | <path d="M325.838 27.7134C325.636 27.2656 326.069 26.8327 326.517 27.0342C326.614 27.079 326.689 27.1537 326.734 27.2507C326.943 27.6985 326.502 28.1389 326.054 27.9299C325.957 27.8851 325.883 27.8105 325.838 27.7134Z" fill="white" fill-opacity="0.1"/>
172 | <path d="M218.48 9.16021C218.278 8.71118 218.712 8.27713 219.161 8.4792C219.258 8.5241 219.333 8.59893 219.378 8.69622C219.58 9.14525 219.146 9.57931 218.697 9.37725C218.599 9.33235 218.525 9.2575 218.48 9.16021Z" fill="white" fill-opacity="0.1"/>
173 | <path d="M218.054 48.732C217.845 48.283 218.285 47.8489 218.733 48.051C218.83 48.0959 218.904 48.1707 218.949 48.268C219.151 48.717 218.718 49.1511 218.27 48.949C218.173 48.9041 218.098 48.8293 218.054 48.732Z" fill="white" fill-opacity="0.1"/>
174 | <path d="M384.054 55.732C383.845 55.283 384.285 54.8489 384.733 55.051C384.83 55.0959 384.904 55.1707 384.949 55.268C385.151 55.717 384.718 56.1511 384.27 55.949C384.173 55.9041 384.098 55.8293 384.054 55.732Z" fill="white" fill-opacity="0.1"/>
175 | <path d="M127.051 144.732C126.849 144.283 127.283 143.849 127.732 144.051C127.829 144.096 127.904 144.171 127.949 144.268C128.151 144.717 127.717 145.151 127.268 144.949C127.171 144.904 127.096 144.829 127.051 144.732Z" fill="white" fill-opacity="0.1"/>
176 | <path d="M74.7701 132.17C74.5685 131.721 75.0015 131.287 75.4493 131.489C75.5463 131.534 75.621 131.609 75.6657 131.706C75.8747 132.155 75.4344 132.589 74.9865 132.387C74.8895 132.342 74.8149 132.267 74.7701 132.17Z" fill="white" fill-opacity="0.1"/>
177 | </svg>
178 | 


--------------------------------------------------------------------------------