juliangarnier/anime · error · Error

Can't morph a <${$path1.tagName}> SVG element. Use <path>, <

Error message

Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.

What it means

Error "Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>." thrown in juliangarnier/anime.

Source

Thrown at src/svg/morphto.js:24

  getPath,
} from './helpers.js';

/**
 * @import {
 *   TargetsParam,
 *   FunctionValue
 * } from '../types/index.js'
*/

/**
 * @param  {TargetsParam} path2
 * @param  {Number} [precision]
 * @return {FunctionValue}
 */
export const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
  const tagName1 = ($path1.tagName || '').toLowerCase();
  if (!tagName1.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
  if (!$path2) {
    throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
  }
  const tagName2 = ($path2.tagName || '').toLowerCase();
  if (!tagName2.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const isPath = $path1.tagName === 'path';
  const separator = isPath ? ' ' : ',';
  const previousPoints = prevTween ? prevTween._value : null;
  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);

  let v1 = '', v2 = '';

  if (!precision) {
    v1 = $path1.getAttribute(isPath ? 'd' : 'points');

View on GitHub (pinned to 01b81be1df)

Solutions

1. Change the animated element to a <path>, <polygon> or <polyline> SVG element before applying the morph.
2. If the shape is a <rect>, <circle> or other shape, convert it to an equivalent <path> (e.g. with an SVG editor) and target that instead.

Example fix

// Wrong: morphing a <rect>
svg.morphTo('#target')($rect);
// Fix: use a morphable element
// <path id="source" d="M0 0 H100 V100 H0 Z"/>
svg.morphTo('#target')($path);

When it happens

Trigger: Thrown at src/svg/morphto.js:24 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of juliangarnier/anime@01b81be1df (2026-08-12). Data as JSON: /api/errors/afe5ebfe34ba342d. Report an issue: GitHub.