morphing-infinity

1"use client";
2 
3import { motion } from "motion/react";
4 
5const circleA =
6  "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
7 
8const infinity =
9  "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
10 
11const circleB =
12  "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
13 
14function MorphingInfinity(props: React.ComponentProps<"svg">) {
15  return (
16    <svg
17      viewBox="0 0 24 24"
18      fill="none"
19      stroke="currentColor"
20      strokeWidth={1.5}
21      strokeLinecap="round"
22      strokeLinejoin="round"
23      role="status"
24      aria-label="Loading"
25      {...props}
26    >
27      <motion.path
28        animate={{
29          d: [circleA, infinity, circleB, infinity, circleA],
30        }}
31        transition={{
32          d: {
33            duration: 5,
34            ease: "easeInOut",
35            repeat: Infinity,
36            times: [0, 0.25, 0.5, 0.75, 1.0],
37          },
38        }}
39      />
40    </svg>
41  );
42}
43 
44export { MorphingInfinity };