Path effects

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Start an effect, then move either shape. Playback follows the current resolved connection, including its bend and contour clipping.

Control	API property	What changes
Particles / Pulse	kind	Moving circles or a fading stroke along the route.
3 / 9 particles	count	Particle spacing, preserving each particle's size.
Small / Large	size	Circle radius of 4 or 8 world units.
Slow / Fast	period	A 3-second or 900-millisecond loop.
Forward / Reverse	reverse	Direction of particle travel.
Stop	stopPathAnimation('delivery')	Removes the effect and restores base-path paint.

Pulse does not consume particle count or size; those choices are retained for switching back to particles. Dense particles can overlap. All playback uses one stable animation ID, so updates replace the effect rather than stacking copies. Controls also start playback if it has stopped.

Animation is presentation state: it is excluded from document JSON, undo history, SVG and PNG. Moving a shape remains an ordinary undoable document edit. See Animation for screen/world sizing and custom effect registration.

Source

void changePathEffect(
  DrawingSession s, {
  DiagramPathAnimationKind? kind,
  int? count,
  double? size,
  Duration? period,
  bool? reverse,
}) {
  final current = s.pathAnimations['delivery'] ?? examplePathAnimation;
  if (!s.startPathAnimation(
    current.copyWith(
      kind: kind,
      count: count,
      size: size,
      period: period,
      reverse: reverse,
    ),
  )) {
    throw StateError('Path effect could not start.');
  }
}