# AnimatedLogo

**When to use:** A self-drawing SVG mark for splash/loading screens, empty states, or anywhere a brand or icon mark should feel alive rather than static. The outline traces in first, then the interior fills, holds, and (when looping) retracts for a seamless replay.

**Keywords:** svg animation, brand mark, logo animation

**Import:** `import { AnimatedLogo } from '@ahrowe/ui'`

```tsx
import { AnimatedLogo } from '@ahrowe/ui';

// Default — the AhroweUI mark, looping
<AnimatedLogo />

// Custom size and colour
<AnimatedLogo size={64} color="#4C6FFF" />

// Play once and hold on the filled state
<AnimatedLogo loop={false} />

// Faster cycle
<AnimatedLogo duration={1.8} />

// Outline only — draws (and, with loop, retracts) the stroke, never fills the interior
<AnimatedLogo fill={false} />

// Spins from 180° to 0° while drawing, then fills once the spin/draw completes
<AnimatedLogo spin />

// Grows from scale 0 to 1 while drawing, then fills once the scale/draw completes
<AnimatedLogo scale />

// Combine spin and scale
<AnimatedLogo spin scale />

// Any single-path SVG mark — pass its `d` data and matching viewBox
<AnimatedLogo
  path="M12 2 L2 22 L22 22 Z"
  viewBox="0 0 24 24"
  size={72}
  color="#22C55E"
/>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `path` | `string` | SVG path `d` data to draw and fill (default: the AhroweUI mark). Multiple subpaths (several `M` commands in one `d`) are supported. |
| `viewBox` | `string` | `viewBox` matching `path`'s coordinate space (default: the AhroweUI mark's viewBox) |
| `size` | `number \| string` | Width/height of the root `svg` (default `96`) |
| `color` | `ColorValue` | The stroke and fill: a `ThemeColor` or any CSS colour (default `--primary-color`) |
| `duration` | `number` | Length of one draw-fill cycle, in seconds (default `4.2`) |
| `loop` | `boolean` | Repeats the draw-fill-retract cycle forever; `false` plays once and holds filled (default `true`) |
| `fill` | `boolean` | Fills the interior once drawn; `false` keeps it an outline-only trace (default `true`) |
| `spin` | `boolean` | Rotates the mark from 180° to 0° while the outline draws, then holds at 0° through the fill (default `false`) |
| `scale` | `boolean` | Scales the mark from 0 to 1 while the outline draws, then holds at 1 through the fill (default `false`); combines with `spin` |
| `className` / `style` | | Root `svg` element |

Respects `prefers-reduced-motion`: the mark renders fully drawn (and filled, when `fill` is `true`), unrotated and at full scale, with no animation.

**Slots:** `path` (the inner `path` element)