Orbiting Circles

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4	import type { HTMLAttributes } from "svelte/elements";
5 
6	interface OrbitingCirclesProps extends HTMLAttributes<HTMLDivElement> {
7		children: Snippet;
8		class?: string;
9		reverse?: boolean;
10		duration?: number;
11		radius?: number;
12		path?: boolean;
13		iconSize?: number;
14		speed?: number;
15		angle?: number;
16		delay?: number;
17	}
18 
19	let {
20		children,
21		class: className,
22		reverse = false,
23		duration = 20,
24		radius = 160,
25		path = false,
26		iconSize = 30,
27		speed = 1,
28		angle = 0,
29		delay = 0,
30		...props
31	}: OrbitingCirclesProps = $props();
32 
33	let calculatedDuration = $derived(duration / speed);
34</script>
35 
36{#if path}
37	<svg
38		xmlns="http://www.w3.org/2000/svg"
39		version="1.1"
40		class="pointer-events-none absolute inset-0 size-full"
41	>
42		<circle
43			class="stroke-1 dark:stroke-white/20"
44			cx="50%"
45			cy="50%"
46			r={radius}
47			fill="none"
48			stroke-dasharray="4 4"
49		/>
50	</svg>
51{/if}
52 
53<div
54	style:--duration={calculatedDuration}
55	style:--radius={radius}
56	style:--angle={angle}
57	style:--delay={delay}
58	style:--icon-size="{iconSize}px"
59	class={cn(
60		"animate-orbit absolute flex size-(--icon-size) transform-gpu items-center justify-center rounded-full [animation-delay:calc(var(--delay)*1000ms)]",
61		{ "direction-[reverse]": reverse },
62		className
63	)}
64	{...props}
65>
66	{@render children()}
67</div>