> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # SVG Stroke Trace > An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed. # SVG Stroke Trace An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed. **SVG Stroke Trace** ```html svg-stroke-trace.html theme={null} SVG Stroke Trace ``` Copy npx hyperframes add svg-stroke-trace to the clipboard That writes one file: `compositions/components/svg-stroke-trace.html`. ## Paste it into your composition Open `compositions/components/svg-stroke-trace.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `path` | `M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194` | string | SVG path data for the authored mark. | | `stroke_width` | `12` | 2 to 32, step 1 | Width of the traced stroke in SVG viewBox units. | | `accent` | `green` | `green`, `blue`, `violet` | Color used by the trace and optional fill. | | `exit` | `none` | `none`, `fade`, `up` | Optional departure. Default none: the finished mark holds until the frame cuts. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `motion-primitive` `intro` `reveal` `svg` `stroke` `line-draw`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [SVG Line Draw Loader](/catalog/components/svg-line-draw-loader.md) - [Lint rules](/reference/lint-rules.md) - [Verified example prompts](/prompting/examples.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.