Back to Dictionary
Creative Motion
●●●Requires Setup
Use sparingly

SVG Path Drawing

Use it as a reveal of a meaningful line, not a default text animation.

Use

Brand intro, route/path explanation, diagram reveal, education, editorial storytelling.

Avoid

Avoid for long body text, important instructions, or logos that must appear instantly for recognition.

Safer Alternative

Fade Transition

Risk Level

High attention

Timing

Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.

Easing

Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.

Risk

performance sensitiveaccessibility sensitiveoverdesigned

Live Demo

What It Is

A logo, signature, diagram, map route, or process line is revealed by animating stroke progress. It works when the line itself communicates construction, journey, or authorship.

Decision Guidance

Use it as a reveal of a meaningful line, not a default text animation.

Best For

Brand intro, route/path explanation, diagram reveal, education, editorial storytelling.

Avoid When

Avoid for long body text, important instructions, or logos that must appear instantly for recognition.

Timing

Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.

Easing

Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.

Risk Tags

performance sensitiveaccessibility sensitiveoverdesigned

Alternatives

Fade TransitionText Reveal PipelineLine Chart Draw

✓When to Use

  • Product contexts: Brand intro, route/path explanation, diagram reveal, education, editorial storytelling.
  • Choose it when the product intent matches Kinetic Typography rather than generic decoration.
  • Use it as a reveal of a meaningful line, not a default text animation.

✕When NOT to Use

  • Avoid for long body text, important instructions, or logos that must appear instantly for recognition.

Configuration Tips

  • 01Technical fit: SVG stroke-dasharray/stroke-dashoffset, CSS, or Framer Motion.
  • 02Performance: Keep paths simple, avoid huge SVGs, and run once rather than looping.
  • 03Accessibility: Provide final visible state and text alternative for meaningful diagrams.
  • 04Reduced motion: Render the completed path immediately.

You've Seen It In

Motion Dict Creative Motion Pack

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Design a SVG Path Drawing for this product context. First explain the product intent, when not to use it, performance budget, accessibility constraints, and reduced-motion fallback. Then propose the simplest implementation family that can express the idea safely.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function MotionDecisionChecklist() {
  const steps = [
    'Confirm product intent',
    'Choose the simplest implementation family',
    'Set performance caps and mobile fallback',
    'Add reduced-motion behavior',
    'Verify accessibility and readable content',
  ];

  return steps;
}

Related Effects

Tracing Beam Scroll

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

Line Chart Draw

A chart line that draws along its path to reveal trend direction and make the data feel progressively discovered.

Kinetic Headline Reveal

Words or letters animate to create a launch, editorial, or campaign moment. It should amplify a single primary message rather than decorate every heading.