Sextant
A sextant fixes your position by observing what is visible, without instrumenting anything it measures. This library does the same for a web page: it reads real values out of rendered graphics.
What it reads
Coordinates
SVG user units, CSS pixels, an iframe's viewport and screenshot space, with every conversion explicit. Mixing two gives plausible numbers, never an error.
Curves
Sample a drawn path into data space, find where it crosses a level, fit a circle from a partial arc, and tell linear from quadratic from exponential.
Expressions
Compare rendered maths by fingerprint over several sample points. x(x+8) and x²+8x share no characters and agree at exactly the point you would test first.
Widgets
Pick the iframe that is actually visible, pin labels to the edges and points they annotate, plan the drags a dot plot needs, and click in a way frameworks accept.
Draw something. It only measures what is on screen.
Measured from the drawing
Every number is derived from the rendered path: sampled, mapped out of SVG user units, and reported in grid coordinates. The demo never hands over the points it drew with.
Why this is harder than it looks
A picture on a web page is measured in four different rulers at once: the drawing's own units, the page's pixels, the little frame it sits in, and the screenshot you took of it. Mix up any two and you get a number that looks perfectly reasonable and is quietly wrong. Sextant keeps every ruler straight, reads the curve the way a person would, and checks that two formulas really are the same by testing them at several points, not just the one that always agrees.
Use it
import { samplePath, crossings, fitCircle, family, makeDataSpace } from 'sextant';
const space = makeDataSpace(originInPagePx, oneUnitInPagePx);
const points = samplePath(document.querySelector('svg path'), space.toData);
crossings(points); // x values where the curve meets y = 0
fitCircle(points); // { cx, cy, r }, works on a partial arc
family(points); // 'linear' | 'quadratic' | 'exponential' | null