1  import { motion } from 'framer-motion';
  2  import { useLocation } from 'react-router-dom';
  3  import { useEffect, useState } from 'react';
  4  interface BubblesProps {
  5    primaryColor?: string;
  6    secondaryColor?: string;
  7  }
  8  const variants = {
  9    a: {
 10      scale: 1,
 11    },
 12    b: {
 13      scale: 1.5,
 14    },
 15    c: {
 16      scale: 2,
 17    },
 18    d: {
 19      scale: 2.5,
 20    },
 21    e: {
 22      scale: 3,
 23    },
 24  };
 25  
 26  const bubbleStates = Object.keys(variants);
 27  
 28  const transition = {
 29    duration: 0.6,
 30    type: 'tween',
 31    ease: 'linear',
 32  };
 33  
 34  // color options
 35  // {
 36  //   primaryColor = '#C33764',
 37  //   secondaryColor = '#1D2671',
 38  // }
 39  // {
 40  //   primaryColor = '#60ff72',
 41  //   secondaryColor = '#0096ff',
 42  // }
 43  
 44  const Bubbles = ({
 45    primaryColor = '#e63946',
 46    secondaryColor = '#6564db',
 47  }: BubblesProps) => {
 48    const [status, setStatus] = useState('a');
 49    const location = useLocation();
 50    useEffect(() => {
 51      const unusedStates = bubbleStates.filter((x) => x !== status);
 52      setStatus(unusedStates[Math.floor(Math.random() * unusedStates.length)]);
 53      // eslint-disable-next-line react-hooks/exhaustive-deps
 54    }, [location]);
 55  
 56    return (
 57      <svg
 58        xmlns="http://www.w3.org/2000/svg"
 59        viewBox="0 0 750 480.2"
 60        preserveAspectRatio="xMidYMid slice"
 61        width="100vw"
 62        height="100vh"
 63        style={{ transform: 'rotate(180deg)' }}
 64      >
 65        <defs>
 66          <radialGradient
 67            id="a"
 68            cx="0"
 69            cy="0"
 70            r="1"
 71            fx="0"
 72            fy="0"
 73            gradientTransform="scale(262.93372 -262.93372) rotate(63.15 1.357 -.874)"
 74            gradientUnits="userSpaceOnUse"
 75            spreadMethod="pad"
 76          >
 77            <stop offset="0" stopColor={primaryColor} />
 78            <stop offset=".011" stopColor={primaryColor} />
 79            <stop offset=".989" stopColor={secondaryColor} />
 80            <stop offset="1" stopColor={secondaryColor} />
 81          </radialGradient>
 82          <radialGradient
 83            id="b"
 84            cx="0"
 85            cy="0"
 86            r="1"
 87            fx="0"
 88            fy="0"
 89            gradientTransform="scale(256.12998 -256.12998) rotate(-26.85 .662 -2.484)"
 90            gradientUnits="userSpaceOnUse"
 91            spreadMethod="pad"
 92          >
 93            <stop offset="0" stopColor={primaryColor} />
 94            <stop offset=".011" stopColor={primaryColor} />
 95            <stop offset=".989" stopColor={secondaryColor} />
 96            <stop offset="1" stopColor={secondaryColor} />
 97          </radialGradient>
 98          <radialGradient
 99            id="c"
100            cx="0"
101            cy="0"
102            r="1"
103            fx="0"
104            fy="0"
105            gradientTransform="scale(245.89953 -245.89953) rotate(-3.474 -15.822 -36.129)"
106            gradientUnits="userSpaceOnUse"
107            spreadMethod="pad"
108          >
109            <stop offset="0" stopColor={primaryColor} />
110            <stop offset=".011" stopColor={primaryColor} />
111            <stop offset=".989" stopColor={secondaryColor} />
112            <stop offset="1" stopColor={secondaryColor} />
113          </radialGradient>
114          <radialGradient
115            id="d"
116            cx="0"
117            cy="0"
118            r="1"
119            fx="0"
120            fy="0"
121            gradientTransform="scale(197.42657 -197.42657) rotate(-34.611 -3.576 -.925)"
122            gradientUnits="userSpaceOnUse"
123            spreadMethod="pad"
124          >
125            <stop offset="0" stopColor={primaryColor} />
126            <stop offset=".011" stopColor={primaryColor} />
127            <stop offset=".989" stopColor={secondaryColor} />
128            <stop offset="1" stopColor={secondaryColor} />
129          </radialGradient>
130          <radialGradient
131            id="e"
132            cx="0"
133            cy="0"
134            r="1"
135            fx="0"
136            fy="0"
137            gradientTransform="scale(89.94663 -89.94663) rotate(-34.611 1.84 -9.09)"
138            gradientUnits="userSpaceOnUse"
139            spreadMethod="pad"
140          >
141            <stop offset="0" stopColor={primaryColor} />
142            <stop offset=".011" stopColor={primaryColor} />
143            <stop offset=".989" stopColor={secondaryColor} />
144            <stop offset="1" stopColor={secondaryColor} />
145          </radialGradient>
146          <radialGradient
147            id="f"
148            cx="0"
149            cy="0"
150            r="1"
151            fx="0"
152            fy="0"
153            gradientTransform="scale(49.56927 -49.56927) rotate(-34.611 -2.104 -20.282)"
154            gradientUnits="userSpaceOnUse"
155            spreadMethod="pad"
156          >
157            <stop offset="0" stopColor={primaryColor} />
158            <stop offset=".011" stopColor={primaryColor} />
159            <stop offset=".989" stopColor={secondaryColor} />
160            <stop offset="1" stopColor={secondaryColor} />
161          </radialGradient>
162          <radialGradient
163            id="g"
164            cx="0"
165            cy="0"
166            r="1"
167            fx="0"
168            fy="0"
169            gradientTransform="scale(-148.16167 148.16167) rotate(53.354 -2.872 -3.856)"
170            gradientUnits="userSpaceOnUse"
171            spreadMethod="pad"
172          >
173            <stop offset="0" stopColor={primaryColor} />
174            <stop offset=".011" stopColor={primaryColor} />
175            <stop offset=".989" stopColor={secondaryColor} />
176            <stop offset="1" stopColor={secondaryColor} />
177          </radialGradient>
178          <radialGradient
179            id="h"
180            cx="0"
181            cy="0"
182            r="1"
183            fx="0"
184            fy="0"
185            gradientTransform="scale(245.89953 -245.89953) rotate(86.526 .985 .1)"
186            gradientUnits="userSpaceOnUse"
187            spreadMethod="pad"
188          >
189            <stop offset="0" stopColor={primaryColor} />
190            <stop offset=".011" stopColor={primaryColor} />
191            <stop offset=".989" stopColor={secondaryColor} />
192            <stop offset="1" stopColor={secondaryColor} />
193          </radialGradient>
194          <radialGradient
195            id="i"
196            cx="0"
197            cy="0"
198            r="1"
199            fx="0"
200            fy="0"
201            gradientTransform="scale(197.42657 -197.42657) rotate(55.389 1.436 -.338)"
202            gradientUnits="userSpaceOnUse"
203            spreadMethod="pad"
204          >
205            <stop offset="0" stopColor={primaryColor} />
206            <stop offset=".011" stopColor={primaryColor} />
207            <stop offset=".989" stopColor={secondaryColor} />
208            <stop offset="1" stopColor={secondaryColor} />
209          </radialGradient>
210          <radialGradient
211            id="j"
212            cx="0"
213            cy="0"
214            r="1"
215            fx="0"
216            fy="0"
217            gradientTransform="scale(89.94663 -89.94663) rotate(55.389 2.643 1.782)"
218            gradientUnits="userSpaceOnUse"
219            spreadMethod="pad"
220          >
221            <stop offset="0" stopColor={primaryColor} />
222            <stop offset=".011" stopColor={primaryColor} />
223            <stop offset=".989" stopColor={secondaryColor} />
224            <stop offset="1" stopColor={secondaryColor} />
225          </radialGradient>
226          <radialGradient
227            id="k"
228            cx="0"
229            cy="0"
230            r="1"
231            fx="0"
232            fy="0"
233            gradientTransform="scale(49.56927 -49.56927) rotate(55.389 6.01 6.37)"
234            gradientUnits="userSpaceOnUse"
235            spreadMethod="pad"
236          >
237            <stop offset="0" stopColor={primaryColor} />
238            <stop offset=".011" stopColor={primaryColor} />
239            <stop offset=".989" stopColor={secondaryColor} />
240            <stop offset="1" stopColor={secondaryColor} />
241          </radialGradient>
242          <radialGradient
243            id="l"
244            cx="0"
245            cy="0"
246            r="1"
247            fx="0"
248            fy="0"
249            gradientTransform="scale(148.16167 -148.16167) rotate(-36.646 -.849 -1.537)"
250            gradientUnits="userSpaceOnUse"
251            spreadMethod="pad"
252          >
253            <stop offset="0" stopColor={primaryColor} />
254            <stop offset=".011" stopColor={primaryColor} />
255            <stop offset=".989" stopColor={secondaryColor} />
256            <stop offset="1" stopColor={secondaryColor} />
257          </radialGradient>
258        </defs>
259        <motion.path
260          animate={status}
261          variants={variants}
262          transition={transition}
263          fill="url(#a)"
264          d="M0 78.695c94.683.563 171.211 62.834 171.211 135.29 0 72.455-76.528 127.786-171.211 128.349z"
265          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
266        />
267        <motion.path
268          animate={status}
269          variants={variants}
270          transition={transition}
271          fill="url(#b)"
272          d="M407.665 0h263.64c-.563 94.683-62.833 147.197-135.289 147.197-72.457 0-127.788-52.514-128.351-147.197"
273          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
274        />
275        <motion.path
276          animate={status}
277          variants={variants}
278          transition={transition}
279          fill="url(#c)"
280          d="M693.527 276.392c15.73-103.692-78.353-84.401-100.71-137.303C569.056 82.865 588.833 36.263 643.462 0H750v438.532s-80.081-6.519-56.473-162.14"
281          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
282        />
283        <motion.path
284          animate={status}
285          variants={variants}
286          transition={transition}
287          fill="url(#d)"
288          d="M30.98 445.947c0-18.917 15.335-34.25 34.25-34.25 18.916 0 34.252 15.333 34.252 34.25 0 18.916-15.336 34.251-34.252 34.251-18.915 0-34.25-15.335-34.25-34.251"
289          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
290        />
291        <motion.path
292          animate={status}
293          variants={variants}
294          transition={transition}
295          fill="url(#e)"
296          d="M517.466 56.473c0-8.618 6.986-15.605 15.604-15.605 8.618 0 15.605 6.987 15.605 15.605s-6.987 15.604-15.605 15.604-15.604-6.986-15.604-15.604"
297          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
298        />
299        <motion.path
300          animate={status}
301          variants={variants}
302          transition={transition}
303          fill="url(#f)"
304          d="M565.708 240.332a8.6 8.6 0 0 1 8.6-8.599 8.598 8.598 0 0 1 8.599 8.599 8.6 8.6 0 0 1-17.199 0"
305          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
306        />
307        <motion.path
308          animate={status}
309          variants={variants}
310          transition={transition}
311          fill="url(#g)"
312          d="M637.42 0H750v160.25C624.649 141.492 637.42 0 637.42 0"
313          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
314        />
315        <motion.path
316          animate={status}
317          variants={variants}
318          transition={transition}
319          fill="url(#h)"
320          d="M0 106.538V0h438.532s-6.519 80.081-162.14 56.473c-103.691-15.731-84.401 78.352-137.303 100.71-15.786 6.671-30.81 9.91-45.062 9.91C57.515 167.091 26.082 145.83 0 106.538"
321          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
322        />
323        <motion.path
324          animate={status}
325          variants={variants}
326          transition={transition}
327          fill="url(#i)"
328          d="M45.874 175.692c0-18.917 15.335-34.251 34.251-34.251 18.916 0 34.251 15.334 34.251 34.251 0 18.917-15.335 34.251-34.251 34.251-18.916 0-34.251-15.334-34.251-34.251"
329          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
330        />
331        <motion.path
332          animate={status}
333          variants={variants}
334          transition={transition}
335          fill="url(#j)"
336          d="M224.727 87.05c0-8.618 6.987-15.604 15.605-15.604s15.605 6.986 15.605 15.604c0 8.618-6.987 15.605-15.605 15.605s-15.605-6.987-15.605-15.605"
337          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
338        />
339        <motion.path
340          animate={status}
341          variants={variants}
342          transition={transition}
343          fill="url(#k)"
344          d="M383.131 87.05a8.6 8.6 0 0 1 17.199 0c0 4.75-3.85 8.599-8.6 8.599a8.598 8.598 0 0 1-8.599-8.599"
345          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
346        />
347        <motion.path
348          animate={status}
349          variants={variants}
350          transition={transition}
351          fill="url(#l)"
352          d="M0 112.58V0h160.25C144.667 104.135 44.382 112.946 10.881 112.946 4.056 112.946 0 112.58 0 112.58"
353          transform="matrix(1.33333 0 0 -1.33333 0 666.667)"
354        />
355      </svg>
356    );
357  };
358  
359  export default Bubbles;