Create, explore, and render noble polyhedra in the browser or Node.js. The catalogue covers 146 finite forms and generators for the two infinite families. Geometry, colors, and rendering are available through one TypeScript package, a native web component, and a visual editor.
Explore the site · Create a shape · Documentation
| Small stellated dodecahedron | Great stellated dodecahedron | Stephanoid |
|---|---|---|
These images were generated by the included Node renderer. The showcase has more examples, each linked to an editable design.
To run the editor and examples from source, clone the repository:
git clone https://github.com/jakiestfu/noble-shapes.git
cd noble-shapes
corepack enable
pnpm install
pnpm devOpen the local address printed by Next.js, or use the live editor.
Install noble-shapes once. It provides focused subpaths for each API:
npm install noble-shapesIn a bundled web app: import the custom element once, then use it in HTML or JSX.
import "noble-shapes/web-component";<noble-shape random="your-username" style="width: 320px; height: 320px"></noble-shape>The same random string produces the same shape and appearance. Set shape, palette, view, or color to override individual choices.
In Node.js: import the Node entry to render a PNG without a browser or native canvas dependency.
import { savePng } from "noble-shapes/node";
await savePng("shape.png", {
shape: "great-stellated-dodecahedron",
palette: "coral",
width: 512,
height: 512,
});For the combined API and command line: the main entry exports browser-safe geometry and render APIs. The same installation provides the CLI.
npx noble-shapes --shape cube --out cube.pngFor geometry access, React custom-element types, shareable design codes, exports, and renderer options, see the usage guide and catalogue.
This is a pnpm monorepo. After cloning it, run pnpm test for the build, type check, geometry checks, renderer checks, and Open Graph image checks. Run pnpm release:check to also inspect the npm archives, or pnpm render:showcase to regenerate the images above. See CONTRIBUTING.md before changing the mathematical catalogue.
The site omits analytics by default. To enable Google Analytics 4 for a build or deployment, set NEXT_PUBLIC_GOOGLE_ANALYTICS_ID to a measurement ID such as G-ABC123. Next.js includes the Google tag on every page only when that variable is set.
The geometry is an independent implementation informed by Connor Hill's classification. No code or model files from the GPL-licensed noble-tools-revised project are included.
MIT licensed. See LICENSE.