[FEATURE] Built-in SVG shape primitives for quick prototyping

Describe what the feature does

Anime.js is incredibly powerful for SVG animation, but the barrier to entry is generating the SVG itself before you can animate it. A lightweight set of built-in shape primitives (paths, not just elements) would let developers start animating immediately without reaching for Figma, Illustrator, or hand-writing path data.

The set could grow in tiers:

Tier 1 — Primitives: circle, triangle, square, pentagon, hexagon, star, heart, arrow Each returns valid SVG path data that works directly with animate(), morphTo, and createDrawable.

Tier 2 — Compound shapes: gear, ribbon, wave, spiral Shapes made of multiple coordinated paths that animate together.

Tier 3 — Complex / 3D-projected: hemisphere, torus, mobius, polyhedron 3D shapes projected to 2D SVG paths — the kind of visuals that look incredible but nobody knows how to generate from scratch.

Code example

import { animate, svg } from 'animejs';
import { triangle, circle, star } from 'animejs/shapes';
import { wave } from 'animejs/shapes/compound';
import { hemisphere } from 'animejs/shapes/complex';

// Get path data at a given size
const triPath = triangle({ size: 200 });
const circPath = circle({ size: 200 });

// Morph between shapes
animate('#my-path', {
  d: [triPath, circPath],
  duration: 1500,
  ease: 'inOutExpo'
});

// Animate a compound shape
animate('#wave-group', {
  ...wave({ segments: 12, amplitude: 40 }),
  duration: 3000,
  loop: true
});

// Project a 3D shape to 2D and animate
animate('#hero-shape', {
  d: hemisphere({ radius: 100, rotation: [0, '360deg'] }),
  duration: 5000,
  loop: true
});

Why this matters

The current workflow for anyone without a design tool background:

1. Open Figma/Illustrator to draw a basic shape
2. Export SVG
3. Clean up the export (unnecessary attributes, transforms, viewBox issues)
4. Paste into code
5. Finally start animating

Steps 1-4 are friction that has nothing to do with animation. For basic geometric shapes this could be a one-liner. For complex shapes, most developers simply can't produce them at all — the gap between "I want a rotating torus" and "here's the SVG path data for a rotating torus" is enormous.

Alternatives considered

• External libraries like svg-path-builder or d3-shape — work for primitives but add a dependency for something the animation library could own, and don't cover complex/3D shapes
• Hand-writing path data — error-prone and not intuitive (I used Figma to generate an invisible motion path for a logo orbit animation on my portfolio site, which felt like a workaround)
• AI-generated SVGs — inconsistent path quality, especially for shapes that need to morph cleanly
• Three.js for 3D — massive overkill when all you need is a 2D projection of a 3D shape, and contradicts the ethos of a lightweight JS animation library

Additional context

This could start small (Tier 1 primitives) and grow through community contributions. Even just documenting "here's how to generate good starting SVGs for anime.js" would reduce the barrier significantly. The library already has world-class animation capabilities — the missing piece is giving developers something worth animating without needing a design tool.