# SVG CSS Variables > Draw, trim, and erase a glowing SVG path by animating CSS variables. **Source:** [https://motion.svelte.page/examples/svg-css-variables](https://motion.svelte.page/examples/svg-css-variables) **Markdown mirror:** [https://motion.svelte.page/examples/svg-css-variables.md](https://motion.svelte.page/examples/svg-css-variables.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: a winding path, drawn in light. Animate CSS variables directly on SVG paths. Scrub the visible segment or replay a draw-and-erase sequence. **Metadata:** tag: `SVG` | api: `animate` | input: `CSS variables` | mode: `live` ### Notes - `animate()` writes custom properties directly onto the SVG paths. - `pathLength="1"` normalizes the stroke so trim values run from zero to one. - `animate(sequence)` draws, erases, and restores the path with upstream sequencing. ### Source #### Default.svelte Source file: [src/lib/examples/svg-css-variables/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/svg-css-variables/demos/Default.svelte) ```svelte

light on a line SVG / CSS VARIABLES

draw a little. leave a little.

Start {start}% setRange( Number(event.currentTarget.value), Math.max(Number(event.currentTarget.value), end), 0.15 )} /> End {end}% setRange( Math.min(start, Number(event.currentTarget.value)), Number(event.currentTarget.value), 0.15 )} />

{reduced.current ? 'Reduced motion: changes apply immediately.' : 'Scrub either end, or replay the complete draw-and-erase sequence.'}

```