Marc Mintel
ecea90dc91
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 1m27s
Build & Deploy / 🏗️ Build (push) Failing after 1m31s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
/* eslint-disable no-unused-vars */
|
|
|
|
import * as React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { IllustrationProps } from "./types";
|
|
|
|
export const ConceptSystem: React.FC<IllustrationProps> = ({
|
|
className = "",
|
|
delay: _delay = 0,
|
|
}) => (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 120 120"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<motion.circle
|
|
cx="60"
|
|
cy="60"
|
|
r="15"
|
|
className="fill-slate-900"
|
|
animate={{ scale: [1, 1.1, 1] }}
|
|
transition={{ duration: 4, repeat: Infinity }}
|
|
/>
|
|
{[0, 72, 144, 216, 288].map((angle, i) => {
|
|
const x = 60 + Math.cos((angle * Math.PI) / 180) * 40;
|
|
const y = 60 + Math.sin((angle * Math.PI) / 180) * 40;
|
|
return (
|
|
<React.Fragment key={i}>
|
|
<motion.line
|
|
x1="60"
|
|
y1="60"
|
|
x2={x}
|
|
y2={y}
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
className="text-slate-400"
|
|
animate={{ strokeDashoffset: [0, 10] }}
|
|
strokeDasharray="2 2"
|
|
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
<motion.circle
|
|
cx={x}
|
|
cy={y}
|
|
r="6"
|
|
className="fill-white stroke-slate-300"
|
|
animate={{ scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 3, repeat: Infinity, delay: i * 0.4 }}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</svg>
|
|
);
|