Animated Gradient With Svg

1"use client"
2 
3import React, { useMemo, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6import { useDimensions } from "@/hooks/use-debounced-dimensions"
7 
8interface AnimatedGradientProps {
9  colors: string[]
10  speed?: number
11  blur?: "light" | "medium" | "heavy"
12}
13 
14const randomInt = (min: number, max: number) => {
15  return Math.floor(Math.random() * (max - min + 1)) + min
16}
17 
18const AnimatedGradient: React.FC<AnimatedGradientProps> = ({
19  colors,
20  speed = 5,
21  blur = "light",
22}) => {
23  const containerRef = useRef<HTMLDivElement>(null)
24  const dimensions = useDimensions(containerRef)
25 
26  const circleSize = useMemo(
27    () => Math.max(dimensions.width, dimensions.height),
28    [dimensions.width, dimensions.height]
29  )
30 
31  const blurClass =
32    blur === "light"
33      ? "blur-2xl"
34      : blur === "medium"
35        ? "blur-3xl"
36        : "blur-[100px]"
37 
38  return (
39    <div ref={containerRef} className="absolute inset-0 overflow-hidden">
40      <div className={cn(`absolute inset-0`, blurClass)}>
41        {colors.map((color, index) => {
42          const animationProps = {
43            animation: `background-gradient ${speed}s infinite ease-in-out`,
44            animationDuration: `${speed}s`,
45            top: `${Math.random() * 50}%`,
46            left: `${Math.random() * 50}%`,
47            "--tx-1": Math.random() - 0.5,
48            "--ty-1": Math.random() - 0.5,
49            "--tx-2": Math.random() - 0.5,
50            "--ty-2": Math.random() - 0.5,
51            "--tx-3": Math.random() - 0.5,
52            "--ty-3": Math.random() - 0.5,
53            "--tx-4": Math.random() - 0.5,
54            "--ty-4": Math.random() - 0.5,
55          } as React.CSSProperties
56 
57          return (
58            <svg
59              key={index}
60              className={cn("absolute", "animate-background-gradient")}
61              width={circleSize * randomInt(0.5, 1.5)}
62              height={circleSize * randomInt(0.5, 1.5)}
63              viewBox="0 0 100 100"
64              style={animationProps}
65            >
66              <circle cx="50" cy="50" r="50" fill={color} />
67            </svg>
68          )
69        })}
70      </div>
71    </div>
72  )
73}
74 
75export default AnimatedGradient