math-curve-loaders

name	math-curve-loaders
description	Use this skill when designing, adapting, or explaining lightweight mathematical curve-based loading animations in plain HTML, CSS, and JavaScript, including rose curves, Lissajous curves, hypotrochoids, cardioids, Cassini ovals, Fourier-style paths, modal previews, and copyable animation snippets.

Math Curve Loaders

Use this skill to build or adapt dependency-free mathematical loading animations for web interfaces.

Workflow

1. Read README.md to understand the gallery and available files.
2. Use index.html, style.css, and main.js as the main reference implementation.
3. Use original.html, original.css, and original.js when the user wants the standalone original loader.
4. Preserve the plain HTML/CSS/JavaScript approach unless the user asks for a framework port.
5. When extracting an animation into another project, copy only the needed curve definition, rendering loop, and styles.

Good Fits

• Mathematical loading states
• Curve animation snippets
• Lightweight UI motion without dependencies
• Explaining or modifying Lissajous, rose, hypotrochoid, cardioid, Cassini oval, or Fourier-style loaders