Wizard

Create and test custom SVG animations.

Library

Search popular icon sets, animate line SVGs, and copy ready-to-use code.

Examples

Browse example pages.

Landing Page Example

Large centered SVG hero icon with animation on page load.

Dashboard Example

Placeholder content for a SaaS analytics dashboard demo.

Pricing Page Example

Placeholder content for a pricing tiers and plan comparison demo.

Docs Page Example

Placeholder content for documentation and code snippets demo.

← Back to Examples

Landing Page Example

Large centered SVG hero icon animating on load.

Placeholder hero area for a full landing page composition.

← Back to Examples

Dashboard Example

Three dashboard cards with auto-animated SVG icons.

Analytics

Placeholder KPI trends and performance highlights.

Users

Placeholder user cohorts and active segment snapshots.

Alerts

Placeholder alert feed and incident status overview.

← Back to Examples

Pricing Page Example

Switch tabs to preview different pricing tiers and trigger icon animation.

Starter

Placeholder starter tier with core features and basic usage limits.

Pro

Placeholder professional tier with expanded limits and workflow tools.

Enterprise

Placeholder enterprise tier with advanced controls and dedicated support.

← Back to Examples

Docs Page Example

Long-form documentation layout with section-by-section icon reveals.

1. Install

Add Animpath with npm and keep the runtime tiny with zero dependencies.

npm install animpath

2. Quick Start

Target an SVG and configure timing, easing, and scheduling in one call.

import { StrokeSVG } from 'animpath';

const anim = new StrokeSVG('#logo', {
  type: 'delayed',
  duration: 1500,
  easing: 'easeInOut',
  start: 'manual'
});

anim.play();

3. Scheduling Strategy

Choose path orchestration modes like wave, oneByOne, or fromCenter. 

new StrokeSVG(svg, {
  type: 'wave',
  duration: 1700,
  staggerDelay: 60
});

4. Viewport Trigger

Use start: 'inViewport' so each icon animates only when the user reaches it.

new StrokeSVG(svg, {
  start: 'inViewport',
  viewportThreshold: 0.35,
  viewportRootMargin: '0px 0px -12% 0px'
});

5. Lifecycle Callbacks

Track progress and completion for analytics, choreography, or UI state.

new StrokeSVG(svg, {
  onStart: () => console.log('start'),
  onProgress: (p) => console.log('progress', p),
  onComplete: () => console.log('done')
});

6. Data Attribute Auto-Init

Scan the page and initialize all tagged SVGs without manual wiring.

<svg data-animpath data-animpath-options='{"type":"delayed","duration":1200}'>...</svg>
import { scan } from 'animpath';
scan();

This section is intentionally long so icon animations are triggered progressively as you scroll. Every docs icon uses renderMode: 'outline' and a viewport trigger.

Guide

Learn how to use Animpath in your projects.

Installation

Install via npm or use a CDN. View the package on npmjs.com or the source code on GitHub. 

npm install animpath

Quick Start

import { StrokeSVG } from 'animpath';

const anim = new StrokeSVG('#my-svg', {
  type: 'delayed',
  duration: 1500,
  easing: 'easeInOut',
  start: 'manual',
});

anim.play();

Constructor

new StrokeSVG(target, options?)

  • target: CSS selector, SVGElement, or an HTMLElement containing an SVG.
  • options: animation configuration object.

All Parameters

Option Type Default Description
type 'delayed' | 'sync' | 'oneByOne' | 'stagger' | 'randomOrder' | 'fromCenter' | 'converge' | 'wave' 'delayed' Scheduling strategy for multi-path SVGs.
duration number 1500 Total animation duration in milliseconds.
easing 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'easeInBack' | 'easeOutBounce' | 'easeOutElastic' | (t: number) => number 'linear' Easing preset name or custom easing function.
start 'auto' | 'manual' | 'inViewport' 'auto' When animation starts.
delay number 0 Initial delay before animation begins (ms).
staggerDelay number 50 Delay between path starts for staggered modes (ms).
direction 'normal' | 'reverse' 'normal' Draw direction of the stroke animation.
loop boolean | number false true loops forever. Numeric loop counts are accepted but finite loop counting is not fully implemented yet.
convertShapes boolean true Convert non-path SVG shapes to paths before animation.
viewportThreshold number 0.1 Intersection ratio to trigger start when using start: 'inViewport'.
viewportRootMargin string '0px' Root margin passed to IntersectionObserver.
onStart () => void - Callback invoked when play() starts.
onProgress (progress: number) => void - Progress callback with value in [0..1].
onComplete () => void - Callback after one animation cycle completes.

Animation Type Behavior

  • sync: all paths animate simultaneously.
  • oneByOne: each path completes before next path.
  • delayed/stagger: overlapping starts controlled by staggerDelay.
  • randomOrder: one-by-one but in shuffled order.
  • fromCenter: center paths start first.
  • converge: outer paths start first.
  • wave: sinusoidal delay distribution.

Instance Methods

  • play(): start or resume.
  • pause(): pause current animation.
  • reset(): rewind to start state.
  • reverse(): toggle draw direction.
  • seek(progress): jump to a progress point 0..1.
  • destroy(): cleanup observers and internals.
  • finished: Promise that resolves when current cycle completes.

Static Helper

import { StrokeSVG } from 'animpath';

const instance = StrokeSVG.fromString(
  '<svg viewBox="0 0 24 24"><path d="M4 12h16" /></svg>',
  '#preview',
  { type: 'sync', duration: 900, start: 'auto' }
);

CDN / Embed

<script src="https://unpkg.com/animpath@latest/dist/animpath.umd.js"></script>
<script>
  const svg = document.querySelector('#my-svg');
  const anim = new AnimPath.StrokeSVG(svg, {
    type: 'wave',
    duration: 1600,
    easing: 'easeInOut',
    start: 'manual',
  });

  anim.play();
</script>

Data Attribute Auto Init

<svg
  data-animpath
  data-animpath-options='{"type":"delayed","duration":1200,"easing":"easeInOut"}'
  viewBox="0 0 24 24"
>
  <path d="M4 12h16" stroke="currentColor" fill="none" />
</svg>

<script type="module">
  import { scan } from 'animpath';
  scan();
</script>