---
title: 'SVG Plugins'
excerpt: 'DrawSVG stroke reveal, MorphSVG icons, MotionPath along a route.'
icon: 'Sparkles'
---

## SVG as motion targets

GSAP’s SVG plugins treat paths as first-class animation subjects: reveal strokes, morph shapes, or follow a route. Register each plugin once; keep path data in the markup (or production assets) rather than inventing paths at runtime unless you already have them.

## DrawSVG

**DrawSVG** animates how much of a stroke is visible (`0` → full length). The path must already have a visible `stroke` and `stroke-width` — fill alone will not draw.

Replay: the polyline paints itself left to right. Great for logos and underlines.

<ComponentPreview replay>
  <GsapDrawSvgLogo />

  <DocsFileTabs title="Draw svg">

```tsx title="draw-svg.tsx"
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
gsap.registerPlugin(DrawSVGPlugin);

gsap.from('.path', { drawSVG: 0, duration: 1.2, ease: 'power2.inOut' });
```

```html title="draw-svg-markup.html"
<svg viewBox="0 0 120 40" class="h-12 w-36">
  <path
    class="gsap-draw-path"
    d="M10,30 L30,10 L50,30 L70,10 L90,30 L110,10"
    fill="none"
    stroke="currentColor"
    stroke-width="3"
  />
</svg>
```

  </DocsFileTabs>
</ComponentPreview>

## MorphSVG

**MorphSVG** interpolates one path’s `d` into another. Both shapes should be real path data (play ↔ pause icons here). This is true geometry morphing — not the UI “merge” pattern from earlier lessons.

Toggle: the triangle melts into pause bars. Keep morph targets compatible (similar point counts help quality).

<ComponentPreview>
  <GsapMorphIcon />

  <DocsFileTabs title="Morph svg">

```tsx title="morph-svg.tsx"
gsap.to('.path', {
  morphSVG: '#pause-shape',
  duration: 0.4,
  ease: 'power2.inOut',
});
```

```html title="morph-svg-markup.html"
<svg viewBox="0 0 24 24" class="size-10">
  <path id="play-shape" class="gsap-morph-path" d="M8,5 L19,12 L8,19 Z" />
  <path id="pause-shape" d="M7,5 H10 V19 H7 Z M14,5 H17 V19 H14 Z" />
</svg>
```

  </DocsFileTabs>
</ComponentPreview>

## MotionPath

**MotionPath** moves an element along an SVG path. `align` keeps the target on the route; `autoRotate` aims it along the tangent. Use `ease: 'none'` for constant travel speed along the path.

Watch the dot follow the curve on a loop — map markers, tokens, and orbit accents.

<ComponentPreview>
  <GsapMotionPathDot />

  <DocsFileTabs title="Motion path">

```tsx title="motion-path.tsx"
gsap.to('.dot', {
  duration: 3,
  repeat: -1,
  ease: 'none',
  motionPath: { path: '#route', align: '#route', autoRotate: true },
});
```

```html title="motion-path-markup.html"
<svg viewBox="0 0 200 80" class="h-20 w-48">
  <path id="route-path" d="M10,40 Q60,10 100,40 T190,40" fill="none" />
  <circle class="gsap-dot-path" r="6" cx="10" cy="40" />
</svg>
```

  </DocsFileTabs>
</ComponentPreview>