> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Outline Draw > A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure. # Outline Draw A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure. **Outline Draw** ```html outline-draw.html theme={null} Outline Draw ``` Copy npx hyperframes add outline-draw to the clipboard That writes one file: `compositions/components/outline-draw.html`. ## Paste it into your composition Open `compositions/components/outline-draw.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 | | - | - | - | - | | `progress` | `100` | 0% to 100%, step 1% | Final percentage of the outline that is drawn. | | `thickness` | `6` | 10.1cqw to 200.1cqw, step 10.1cqw | Outline stroke in tenths of the host width. | | `radius` | `24` | 00.1cqmin to 800.1cqmin, step 10.1cqmin | Corner radius in tenths of the host smaller dimension. | 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` `effects` `outline` `border` `mask` `proof`. ## 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 - [Speech Bubble](/catalog/blocks/hw-text-cloud.md) - [Scribble Callout Circle](/catalog/components/hw-callout-circle.md) - [Stitched Text Draw](/catalog/components/stitched-text-draw.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.