MotionScript

Path

Renders an SVG path. Accepts any d string from Illustrator, Figma, or hand-written SVG via the data prop. The node auto-measures its bounding box from the path data and defaults to width: 'hug', height: 'hug'.

0.0s / 4.0s

Usage

import { createScene, Path } from '@motion-script/core';

export default createScene(function* (stage) {
  // Triangle from an SVG d string
  stage.add(
    <Path
      data="M 0 -60 L 52 40 L -52 40 Z"
      fill="#6990DD"
    />
  );

  // Heart outline drawn with a stroke
  stage.add(
    <Path
      data="M 0 30 C -60 -20 -80 -60 0 -20 C 80 -60 60 -20 0 30 Z"
      stroke={{ fill: '#6990DD', weight: 8 }}
    />
  );
});

Props

PropTypeDefaultDescription
datastring | PathCommand[]–SVG path data string, or an array of path commands

Path inherits all standard ShapeNode props (fill, stroke, shadow, start, end, opacity, etc.).

Size defaults

Path defaults to width: 'hug', height: 'hug', and auto-measures the bounding box from the path data. Set explicit width/height to scale the path to a fixed size.

PathCommand array

Instead of a string, pass a typed array of command objects:

type PathCommand =
  | { type: 'M'; x: number; y: number }
  | { type: 'L'; x: number; y: number }
  | { type: 'C'; x1: number; y1: number; x2: number; y2: number; x: number; y: number }
  | { type: 'Q'; x1: number; y1: number; x: number; y: number }
  | { type: 'A'; rx: number; ry: number; rotation: number; largeArc: boolean; sweep: boolean; x: number; y: number }
  | { type: 'Z' };

Animating

Animate start/end to draw on or erase the path:

import { createScene, Path, createRef, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const shape = createRef<Path>();

  stage.add(
    <Path
      ref={shape}
      data="M -100 0 C -100 -80 100 -80 100 0 C 100 80 -100 80 -100 0 Z"
      stroke={{ fill: '#6990DD', weight: 8 }}
      end={0}
    />
  );

  // Draw the path on
  yield* shape().to({ end: 1 }, 1.5, easeInOut);

  // Erase it back off
  yield* shape().to({ end: 0 }, 1.5, easeInOut);
});

Animate any other node prop normally with .to():

// Fade and scale
yield* shape().to({ opacity: 0, scale: 0.5 }, 0.6, easeInOut);

Notes

  • Path coordinates are in the path's own local space. The node auto-centers the bounding box at its origin.
  • Copy the d attribute directly from an SVG file or Figma's "Copy as SVG" export into the data prop.
  • Paths with only a stroke (no fill) work well with start/end animation for line-drawing effects.