# SVG Animation
> Bind MotionValues to SVG attributes and commit exact final styles after accelerated animation.
**Source:** [https://motion.svelte.page/examples/svg-animation](https://motion.svelte.page/examples/svg-animation)
**Markdown mirror:** [https://motion.svelte.page/examples/svg-animation.md](https://motion.svelte.page/examples/svg-animation.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: one spring, three attributes.
A single useSpring drives the ring’s stroke-dashoffset, the dot’s cx, and the line’s x2. No keyframes and no re-render: Motion subscribes to the value and renders every bound value as an SVG presentation attribute — the same channel React Framer Motion uses.
**Metadata:** tag: `SVG` | api: `motion.circle` | input: `useSpring` | channel: `attribute`
### Notes
- One `useSpring` feeds every bound attribute through `useTransform`, so they stay in lockstep.
- Every bound value — `cx`, `stroke-dashoffset`, `x2` — is written as a presentation attribute via `setAttribute`: one MotionValue, one channel.
- That is exactly how React Framer Motion renders SVG, so cascade behavior (author CSS beats presentation attributes) matches upstream too.
### Source
#### Default.svelte
Source file: [src/lib/examples/svg-animation/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/svg-animation/demos/Default.svelte)
```svelte
one MotionValueBound straight to SVG attributes — no keyframes
stroke-dashoffsetprogress ring
cx & x2one attribute channel
cx and x2 are both written
as presentation attributes via
setAttribute — one MotionValue, one channel, exactly how
React Framer Motion renders SVG.
```
## FIG-002: launch bright, land exact.
Motion 12.43 introduced accelerated SVG style animations; Motion 13 fixed their final-style restore. A luminous vector packet crosses a compositor-friendly transform track, blooms at its dock, and fades to a committed final state. Live telemetry reports the browser’s actual opacity, transform, and fill so replay and reverse make stale CSS impossible to miss.
**Metadata:** tag: `MOTION 13` | wow: `signal dock` | proof: `computed style` | a11y: `reduced motion`
### Notes
- The WOW moment is the signal’s luminous dock: it travels, changes fill, disappears, and leaves a bloom precisely on the marked destination.
- Telemetry reads computed opacity, transform, and fill from the SVG node—not merely the intended animation state. Opacity and transform are the accelerated CSS channels; fill is an SVG paint attribute shown alongside them, not an acceleration claim.
- Replay and reverse exercise both final-style commits; reduced-motion users get the same states without the travel animation.
### Source
#### SignalDock.svelte
Source file: [src/lib/examples/svg-animation/demos/SignalDock.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/svg-animation/demos/SignalDock.svelte)
```svelte