↑↓ move · ↵ open · esc close

cseen

A small TypeScript library, cseen, that draws 3D figures as SVG from coordinates. Every illustration on this site, including the animated ones, comes from it. It is published on npm as cseen.

StatusShipped
Built withTypeScriptSVGGeometry
Linksnpm ↗
A small version

A small version of the project. The full one is linked below.

How it works
  • 01A scene is plain code: boxes, lines, dots, arcs and cameras placed with x right, y into the scene and z up. One projection function turns those coordinates into screen positions, and one painter-sorted pass draws them as SVG.
  • 02Every scene is a function of time, so the still image on a card and the animation in the browser come from the same code. A fixed fit stops the picture from jittering while things move.
  • 03All 17 figures of this site are here, drawn live by cseen. Pick one, scrub the time, and download the SVG.
More in this category
Creative coding and motion

Point field generator

Type a math expression and see it plotted as a field of points […]

CanvasWebGL+1