Mobius Loop Icon

1"use client"
2 
3import type { SVGMotionProps } from "motion/react"
4import { motion } from "motion/react"
5 
6const circle1 =
7  "M12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4Z"
8 
9const infinity =
10  "M 6 16 C 11 16 13 8 18 8 C 23.333 8 23.333 16 18 16 C 13 16 11 8 6 8 C 0.667 8 0.667 16 6 16 Z"
11 
12const circle2 =
13  "M12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20Z"
14 
15export function MobiusLoopIcon(props: SVGMotionProps<SVGSVGElement>) {
16  return (
17    <motion.svg
18      viewBox="0 0 24 24"
19      fill="none"
20      stroke="currentColor"
21      strokeWidth="2"
22      strokeLinecap="round"
23      strokeLinejoin="round"
24      aria-hidden
25      {...props}
26    >
27      <motion.path
28        animate={{
29          d: [circle1, infinity, circle2],
30        }}
31        transition={{
32          d: {
33            duration: 3,
34            ease: "easeInOut",
35            repeat: Infinity,
36          },
37        }}
38      />
39    </motion.svg>
40  )
41}