Orbit Diagram Component Test

Example 1: Basic Usage

Example 2: Fast Rotation

Example 3: Minimal Setup

Example 4: Slow Rotation

OrbitDiagram Component Documentation

Props

Basic Props

  • width - SVG width in pixels
  • height - SVG height in pixels

Centre Object

  • size - Diameter of centre circle
  • color - Fill colour of centre circle

Orbit Object

  • count - Number of orbiting circles
  • size - Diameter of orbiting circles
  • color - Fill colour of orbiting circles
  • lineColor - Colour of connecting lines

Optional Orbit Props

  • lineThickness - Line stroke width (default: 2)
  • arcRadius - Curvature of arcs (default: 20)
  • distance - Distance from centre (default: auto)
  • rotationDuration - Rotation speed in seconds (default: 20)

Features

  • • Fixed dimensions: Configurable width and height
  • • Central circle: Customisable size and colour (static)
  • • Orbiting circles: Arbitrary count, evenly spaced
  • • Rotation animation: Smooth rotation around centre with configurable speed
  • • Inward arcs: Curved connections between orbiting circles curving towards centre
  • • Labels: Numbered labels on orbiting circles
  • • Visual guide: Dotted orbit circle outline
  • • Styling: Tailwind CSS with shadows and borders
  • • Future-ready: Designed to support circular images