Orbiting Circles

A component that displays icons or elements orbiting in a circular path with customizable radius, duration, and direction.

Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/orbiting-circles.json

Copy and paste the following code into your project:

orbiting-circles.svelte

index.ts

Add the following to your routes/layout.css file:

src/routes/layout.css

A component that creates orbiting animations with customizable paths and behaviors.

Name	Type	Default	Description
`class`	`string`	`""`	`Additional CSS classes to apply to the orbiting element`
`reverse`	`boolean`	`false`	`Reverse the direction of orbit (counter-clockwise)`
`duration`	`number`	`20`	`Base duration of one complete orbit in seconds`
`radius`	`number`	`160`	`Radius of the orbit path in pixels`
`path`	`boolean`	`false`	`Show the dotted circular orbit path`
`iconSize`	`number`	`30`	`Size of the orbiting icon/element in pixels`
`speed`	`number`	`1`	`Speed multiplier for the orbit animation`
`angle`	`number`	`0`	`Starting angle of the orbit in degrees`
`delay`	`number`	`0`	`Animation delay in seconds (negative values start the animation earlier)`
`children`	`Snippet`	`-`	`Snippet content to render inside the orbiting element`