React Math Visualization

Math made beautiful
for React

Build interactive coordinate planes, function plots, geometric shapes, and vector fields with a delightful declarative API.

See it in actionView Code
20+
Components
SSR
Compatible
TS
First Class
Interactive — scroll to zoom
Showcase

See what you can build

Every visualization is interactive, accessible, and renders beautifully. Drag points, zoom in, and explore.

Features

Everything you need to visualize math

A complete toolkit for interactive mathematical visualizations, designed for React developers.

Declarative API

Build complex visualizations with simple JSX. Compose components like any React app.

Built-in Interactions

Draggable points, pan, and zoom out of the box. useMovablePoint makes everything interactive.

TypeScript Native

Full TypeScript support with precise types for every component, prop, and callback.

SSR Compatible

Works with Next.js App Router, Pages Router, Remix, and any React SSR framework.

Accessible

SVG-based rendering is screen-reader friendly. Keyboard navigation for all interactive elements.

Composable

Mix coordinate systems, plots, shapes, and interactions. Wrap in Transform for complex layouts.

Code

Delightfully simple API

A few lines of JSX is all it takes to create interactive mathematical visualizations.

InteractiveSine.tsx
1import { Mafs, Coordinates, Plot, Theme,
2         useMovablePoint } from "mafs"
3 
4function InteractiveSine() {
5  // Drag to change amplitude (y) and frequency (x)
6  const point = useMovablePoint([1.5, 1.5])
7  const freq = point.point[0]
8  const amp = point.point[1]
9 
10  return (
11    <Mafs height={340}>
12      <Coordinates.Cartesian subdivisions={2} />
13      <Plot.OfX
14        y={(x) => amp * Math.sin(x * freq)}
15        color={Theme.indigo}
16      />
17      {point.element}
18    </Mafs>
19  )
20}
Live result — drag the point to interact
Components

Component gallery

A rich set of primitives that compose together to create any visualization.

Scroll to load
<Plot.OfX />

Plot any f(x) function

Scroll to load
<Plot.Parametric />

Parametric curves and Lissajous figures

Scroll to load
<Point />

Plot points on the plane

Scroll to load
<Vector />

Direction and magnitude

Scroll to load
<Circle />

Center and radius

Scroll to load
<Polygon />

N-sided filled shapes

Scroll to load
<Line.Segment />

Segments between two points

Scroll to load
<Ellipse />

Ellipses with semi-axes

Scroll to load
<Text />

Positioned labels

Hooks & Utilities

Powerful hooks for interactivity

React hooks that make math interactive. Drag, constrain, compute — all reactive.

useMovablePoint

Create interactive draggable points that update on drag. Provides the point coordinates and a renderable element.

const p = useMovablePoint([1, 1])
// p.point → [x, y]
// p.element → <DraggablePoint />
Scroll to load
vec utilities

Vector math helpers: add, subtract, scale, rotate, normalize. Visualize vector addition by dragging the two input vectors.

const sum = vec.add(a.point, b.point)
const scaled = vec.scale(v, 2)
const unit = vec.normalize(v)
Scroll to load
constrain

Constrain points to curves, axes, or arbitrary paths. This point is locked to the sine curve.

useMovablePoint([1, 0], {
  constrain: ([x]) => [x, Math.sin(x)]
})
Scroll to load
Animation

Bring math to life

The useStopwatch hook gives you a time value that ticks every frame — perfect for animations.

Orbital Motion

Two points orbiting at different speeds with a connecting line. Press play to start.

Traveling Waves

Three phase-shifted sine waves propagating through space. Press play to start.

Explorations

40 interactive math demos

From calculus to fractals, from statistics to physics. Every demo is interactive and includes copyable code.

Scroll to load

Quadratic Explorer

Algebra

Drag the vertex and a second point to reshape the parabola. The equation updates live.

Scroll to load

Tangent Line

Calculus

Drag the point along sin(x) to see the tangent line and its slope in real time.

Scroll to load

Riemann Sums

Calculus

Drag to increase the number of rectangles and watch the area converge to the integral.

Scroll to load

Unit Circle

Geometry

Drag the point around the circle to see sin, cos, and angle values update.

Scroll to load

Bezier Curve

Geometry

Drag 4 control points to shape a cubic Bezier curve with De Casteljau's algorithm.

Scroll to load

Taylor Series

Calculus

Drag to add more terms and watch the polynomial approximate sin(x) further from the origin.

Scroll to load

Determinant as Area

Linear Algebra

Drag two vectors to see the parallelogram they form. The determinant equals the signed area.

Scroll to load

Projectile Motion

Physics

Drag the velocity vector to set launch angle and speed. Watch the projectile fly!

Scroll to load

Fractal Tree

Fractals

Drag to change the branch angle and watch the recursive tree transform.

Scroll to load

Normal Distribution

Statistics

Drag two boundary points to shade the probability area under the bell curve.

Scroll to load

Linear Regression

Statistics

Drag 6 data points and see the least-squares best-fit line update with residuals.

Scroll to load

Spirals

Geometry

Archimedes spiral (linear growth) vs Golden spiral (exponential growth) side by side.

Scroll to load

Pendulum

Physics

A damped pendulum swinging with decreasing amplitude. Uses useStopwatch for animation.

Scroll to load

Lissajous Curves

Geometry

Drag to change integer frequencies a and b to explore Lissajous figures.

Scroll to load

Epsilon-Delta

Calculus

Drag epsilon to see the corresponding delta for the limit of x² at x=1.

Scroll to load

Matrix Transform

Linear Algebra

Drag î and ĵ basis vectors to see how the 2x2 matrix warps space. Grid lines transform too.

Scroll to load

Vector Field Flow

Vector Calculus

Animated particles follow the rotation field F(x,y) = (-y, x). Watch them orbit!

Scroll to load

Slope Field

Diff. Equations

Drag the initial condition point to see the Euler method solution curve follow the slope field.

Scroll to load

Lotka-Volterra

Diff. Equations

Phase portrait of predator-prey dynamics. The pink dot traces the orbit over time.

Scroll to load

Galton Board

Probability

Pegs + bins form a binomial distribution, demonstrating the Central Limit Theorem.

Scroll to load

Bayes' Theorem

Probability

Drag the prior probability to see how the posterior updates via Bayes' rule.

Scroll to load

Probability Tree

Probability

Interactive probability tree with draggable P(A). Shows all branch probabilities.

Scroll to load

Modular Multiplication

Number Theory

Connect points on a circle by multiplication mod n. Drag to change the multiplier and see cardioids emerge.

Scroll to load

Prime Sieve

Number Theory

Sieve of Eratosthenes visualized. Dark points are primes, light are composite.

Scroll to load

Fourier Series

Signal Processing

Drag to add harmonics and watch the series converge to a square wave. See Gibbs phenomenon!

Scroll to load

Convex Hull

Geometry

Drag 8 points and watch the convex hull (Graham scan) update in real time.

Scroll to load

Circle Packing

Geometry

Randomly packed non-overlapping circles filling the coordinate plane.

Scroll to load

Gradient Descent

Optimization

Watch gradient descent find the minimum of f(x,y) = x² + 3y² on a contour plot.

Scroll to load

Partial Derivatives

Vector Calculus

Drag a point to see the gradient vector and its ∂f/∂x and ∂f/∂y components.

Scroll to load

Prisoner's Dilemma

Game Theory

Drag to set opponent's cooperation probability. Compare cooperate vs defect payoffs.

Scroll to load

Complex Mapping z²

Complex Analysis

See how the map w = z² transforms a rectangular grid into curves in the complex plane.

Scroll to load

Julia Set

Complex Analysis

Fractal boundary of z² + c iteration for c = -0.7 + 0.27i. Points that don't escape are plotted.

Scroll to load

Galton Board Sim

Simulation

Watch 100 balls fall through pegs and accumulate into a bell curve. Each ball takes a random path.

Scroll to load

Spring-Mass System

Simulation

Damped harmonic oscillator. Drag to adjust damping and watch the transition from underdamped to overdamped.

Scroll to load

Double Pendulum

Simulation

A chaotic double pendulum with trailing path. Tiny changes in initial conditions lead to wildly different trajectories.

Scroll to load

Wave Interference

Simulation

Two wave sources with expanding wavefronts. Drag sources to see constructive and destructive interference.

Scroll to load

Random Walks

Simulation

5 independent random walks starting from the origin. Watch them spread out over time (Brownian motion).

Scroll to load

N-Body Gravity

Simulation

4 bodies interacting via gravity. One heavy central mass and 3 orbiting smaller masses with trails.

Scroll to load

Logistic Map

Simulation

Cobweb diagram for x_{n+1} = r*x*(1-x). Drag r to explore period doubling and chaos.

Scroll to load

Electric Field

Simulation

Drag positive (+) and negative (-) charges to see the electric field vectors update in real time.

Use Cases

Built for every use case

From classrooms to production apps, Mafs powers interactive math everywhere.

Math Education

Build interactive lessons where students can drag, explore, and discover mathematical concepts. From elementary fractions to calculus, Mafs makes abstract ideas tangible.

Number linesFunction explorersGeometry proofsCalculus visualizations

Documentation

Embed live, interactive examples in your docs, blog posts, or READMEs. Readers can manipulate the math to build intuition instead of just reading about it.

API documentationTechnical blog postsResearch papersInteractive textbooks

Data Visualization

Plot scientific data, statistical distributions, or algorithm visualizations. Mafs' SVG rendering produces crisp output at any resolution.

Scatter plotsDistribution curvesAlgorithm stepsPhysics simulations

Creative & Artistic

Generate mathematical art with polar curves, parametric equations, and fractals. Combine Mafs with animation hooks for stunning visual experiences.

Rose curvesSpirographsFractal treesParametric art

Ready to get started?

Install Mafs in seconds and start building interactive math visualizations.

React 18+TypeScriptNext.jsViteRemix
0 FPS