> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# SVG Line Draw Loader

> An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.

# SVG Line Draw Loader

An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.

**SVG Line Draw Loader**

```html svg-line-draw-loader.html theme={null}
<!--
  SVG Line Draw Loader - advanced HyperFrames primitive.

  This is intentionally seekable: drive it from a paused GSAP timeline.
  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
-->

<div class="hf-advanced-svg-line-draw-loader">
  <svg viewBox="0 0 520 220"><path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" /></svg>
</div>

<style>
  .hf-advanced-svg-line-draw-loader {
    color: var(--fg, #111827);
    font-family: var(--font-body, Inter, system-ui, sans-serif);
  }
  .hf-advanced-svg-line-draw-loader {
    width: 720px;
    min-height: 420px;
    border-radius: var(--radius, 30px);
    padding: var(--space-3, 36px);
    background: var(--surface, #fff);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
    display: grid;
    place-items: center;
  }
  .hf-advanced-svg-line-draw-loader .grid {
    display: grid;
    grid-template-columns: repeat(8, 46px);
    gap: var(--space-1, 10px);
  }
  .hf-advanced-svg-line-draw-loader .cell {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
    opacity: var(--hf-cell-opacity, 1);
  }
  .hf-advanced-svg-line-draw-loader svg {
    width: 520px;
    height: 220px;
    overflow: visible;
  }
  .hf-advanced-svg-line-draw-loader path {
    fill: none;
    stroke: var(--accent, #18181b);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 900;
    stroke-dashoffset: var(--hf-dash, 0);
  }
  .hf-advanced-svg-line-draw-loader .stack {
    position: relative;
    width: 520px;
    height: 260px;
  }
  .hf-advanced-svg-line-draw-loader .card {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
    opacity: var(--hf-card-opacity, 1);
  }
</style>

<!--
  Timeline integration:
  const startTime = 0;
  tl.fromTo('.hf-advanced-svg-line-draw-loader path', { '--hf-dash': 900 }, { '--hf-dash': 0, duration: 1.35, ease: 'power3.inOut' }, startTime);
-->
```

Copy npx hyperframes add svg-line-draw-loader to the clipboard

That writes one file: `compositions/components/svg-line-draw-loader.html`.

## Paste it into your composition

Open `compositions/components/svg-line-draw-loader.html` and copy what is inside into your own composition.
The file opens with a comment header that walks you through it.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

Tagged `video-primitive` `advanced-motion` `anime-inspired` `hyperframes-native`.

## 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

- [Verified example prompts](/prompting/examples.md)
- [Minimal Line Graph](/catalog/blocks/mk-line-graph.md)
- [SVG Stroke Trace](/catalog/components/svg-stroke-trace.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.