Curves

Dependency-free curve rendering to SVG and Canvas. Plot standard and parametric curves with any expression engine you like.

Try the playground View on GitHub

pnpm install math-curve

Zero dependencies

Small, fast, and framework-agnostic. No runtime baggage.

SVG & Canvas

Render crisp paths to either target with a shared render state.

Bring your own engine

Curves consume an Evaluable interface, so any expression parser plugs in.

Animated curves

Drive expressions with a time value to draw looping animations.

Viewport & axes

Configurable grid, axes, labels, and themes for any data range.

Playground

Experiment with the syntax and export shareable links.

Usage

import { renderSvg } from "math-curve";

const state = {
  viewport: { xMin: -10, xMax: 10, yMin: -10, yMax: 10 },
  width: 800,
  height: 600,
  theme: { bg: "#fff", gridLine: "#eee", axis: "#999", label: "#666" },
  curveColors: ["#3b82f6"],
  curves,
  activeLine: -1,
  aliasValues: {},
  T: 0,
};

renderSvg(document.querySelector("#plot"), state);