ripple

1import { cn } from "@/lib/utils";
2 
3function Ripple({ className, ...props }: React.ComponentProps<"svg">) {
4  return (
5    <svg
6      viewBox="0 0 44 44"
7      fill="none"
8      stroke="currentColor"
9      xmlns="http://www.w3.org/2000/svg"
10      className={cn(className)}
11      {...props}
12    >
13      <title>Loading...</title>
14      <g fill="none" fillRule="evenodd" strokeWidth="2">
15        <circle cx="22" cy="22" r="1">
16          <animate
17            attributeName="r"
18            begin="0s"
19            calcMode="spline"
20            dur="1.8s"
21            keySplines="0.165, 0.84, 0.44, 1"
22            keyTimes="0; 1"
23            repeatCount="indefinite"
24            values="1; 20"
25          />
26          <animate
27            attributeName="stroke-opacity"
28            begin="0s"
29            calcMode="spline"
30            dur="1.8s"
31            keySplines="0.3, 0.61, 0.355, 1"
32            keyTimes="0; 1"
33            repeatCount="indefinite"
34            values="1; 0"
35          />
36        </circle>
37        <circle cx="22" cy="22" r="1">
38          <animate
39            attributeName="r"
40            begin="-0.9s"
41            calcMode="spline"
42            dur="1.8s"
43            keySplines="0.165, 0.84, 0.44, 1"
44            keyTimes="0; 1"
45            repeatCount="indefinite"
46            values="1; 20"
47          />
48          <animate
49            attributeName="stroke-opacity"
50            begin="-0.9s"
51            calcMode="spline"
52            dur="1.8s"
53            keySplines="0.3, 0.61, 0.355, 1"
54            keyTimes="0; 1"
55            repeatCount="indefinite"
56            values="1; 0"
57          />
58        </circle>
59      </g>
60    </svg>
61  );
62}
63 
64export { Ripple };