# Conic Gradient
> Pointer-tracking conic gradient example using Svelte Motion useTransform and writable stores.
**Source:** [https://motion.svelte.page/examples/conic-gradient](https://motion.svelte.page/examples/conic-gradient)
**Markdown mirror:** [https://motion.svelte.page/examples/conic-gradient.md](https://motion.svelte.page/examples/conic-gradient.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: pointer-tracking gradient.
Move the cursor across the swatch. Two writable stores track the pointer position; `useTransform` derives the `conic-gradient(...)` background string from them; `styleString` paints it onto the inline style.
**Metadata:** tag: `USETRANSFORM` | pattern: `derived-style`
### Notes
- Two writable stores (`gradientX`, `gradientY`) hold the pointer's normalised position. `onpointermove` writes to them; the derived background re-evaluates synchronously.
- `useTransform(fn, deps)` returns a derived motion value that recomputes whenever any dep store changes. The fn produces the full `conic-gradient(...)` string by interpolating store values into a template literal.
- `styleString` serialises the derived value object onto the inline `style` attribute. Re-evaluates every time `$background` emits, keeping the gradient in lockstep with the pointer.
### Source
#### Default.svelte
Source file: [src/lib/examples/conic-gradient/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/conic-gradient/demos/Default.svelte)
```svelte