DESIGN QUESTION / DZ-01.03SHEETSTUDYREV.

Explorations in Math and Beauty

What do 100 experiments in parametric drawing reveal about variation, motion, and taste?

I built 100 small drawing systems to explore a larger idea: math does not remove ambiguity; it gives ambiguity structure. Each study is generated from a formula, drawn as inline SVG, and disturbed by one spring value. Math produces possibility, but we get to decide which possibilities are worth pursuing.

Part01.03GroupResearchRoleDesign / code / researchFirst builtFigures2026-09
The Parametric Geometry gallery showing formula-built line studies and three viewing densities.
The Parametric Geometry gallery showing formula-built line studies and three viewing densities.
parametric-geometry.vercel.apphttps://parametric-geometry.vercel.app/
Figures as of 2026-09.

Start with the line

A line looks certain after it has been drawn. It hides the false starts, tolerances, and decisions that gave it shape. Parametric drawing makes those decisions visible again.

I built Parametric Geometry as a collection of 100 small drawing systems. Every study begins as a compact parameter object, becomes geometry through a formula, and is rendered as stroke-only inline SVG. Hover does not move an illustration around the page. It changes the inputs and asks the drawing to become itself again.

Open the live collection and move across the field. The useful part is not only seeing the response. It is feeling that the line has rules, memory, and room to change.

Give ambiguity a structure

In Of Math and Men, I wrote that math matters not only because it produces answers, but because it gives us frameworks for imperfect choices. It teaches us to name variables and assumptions, break a problem into steps, check our work, optimize what we can, and live with compromise where we cannot. This project turns that argument into something you can visualize.

A parameter names what may change. A constraint names what must hold. A formula records how one decision affects another. None of those things decides what is beautiful. They make the basis for that judgment available for inspection: math does not remove ambiguity; it gives ambiguity structure.

Let one value disturb the system

Every component shares the same interface: a small set of shape parameters and one progress value, t, between zero and one. At t = 0, the drawing rests. At t = 1, it is fully disturbed. Between them is a continuum of valid forms.

The progress value follows an interruptible spring with stiffness 120 and damping 18. Reversing direction midway does not restart an animation. It changes the spring's target, so velocity and position remain continuous.

The gallery presents 100 mathematical families as a consistent field of stroke-only SVG drawings.
The gallery presents 100 mathematical families as a consistent field of stroke-only SVG drawings.
The math drawer compares the overlap field at rest and fully disturbed, then exposes its equation and construction notes.
The math drawer compares the overlap field at rest and fully disturbed, then exposes its equation and construction notes.

The more important constraint is what does not happen. No SVG root is scaled, rotated, or translated. Radius, phase, curvature, sample position, and local offsets change inside the equation. The geometry deforms. The object does not merely move.

That distinction is small in code and immediate to the eye. A repeated circle lattice breathes unevenly because each circle receives a phase derived from its row and column. A stepped grid cascades because each cell has its own diagonal delay. A surface of revolution appears to turn because the meridian samples advance around the same fixed profile. In every case, the bounding box stays put while the relationships inside it change, and the drawing remains itself without remaining identical.

Keep the technical grammar strict

The collection holds to one material system so the mathematical differences remain legible. Seven rules govern every study.

  • Inline SVG only, with no canvas, WebGL, video, sprite sheet, or icon font.
  • Stroke only, with no filled shapes or gradients.
  • A uniform 1.7 pixel, non-scaling stroke with round caps and joins.
  • One saturated earthy hue per study.
  • A static t = 0 rendering when JavaScript is unavailable.
  • No hover response when a person prefers reduced motion.
  • Pure geometry functions that can be retuned from one parameter object.

Those rules are not austerity for its own sake. A constraint is useful when it creates a fair comparison. With the medium held constant, a circle lattice, strange attractor, Möbius band, torus knot, and harmonic field can sit beside one another without the styling pretending they are different.

Let calculation serve judgment

Code can calculate coordinates, generate variants, and test outputs. AI can help extend a family faster than I could draw 100 studies by hand. Neither can decide which differences matter.

That work still asks human questions. How much motion is enough to reveal the system without turning it into a trick? Which near-duplicates expose a meaningful parameter change, and which are only repetition? When does mathematical density become visual noise? What should stay invariant so the viewer can perceive what changed?

The point is not to automate taste. It is to give taste something explicit to act on. Math produces possibility, but we get to decide which possibilities are worth pursuing.

Design the handoff

Inspectability became the final design material. Clicking any study opens its governing equation, construction notes, variant parameters, and rest-versus-disturbed comparison. Three persistent viewing densities let a person read individual forms, compare twenty-five at once, or see all 100 as a single field.

The open-source page offers React components, raw SVG exports, source code, design rules, and an MIT license.
The open-source page offers React components, raw SVG exports, source code, design rules, and an MIT license.

The project is also open source. Each study can be downloaded as SVG, copied as SVG markup, or copied as a React component. The downloadable package includes all 100 presets, named constructions, TypeScript declarations, a universal `StudyIcon` component, and the shared spring hook. It can be installed directly from the project site today; publishing the same package to npm is the remaining registry step. The repository includes the design rules so another person can extend the system without losing its grammar.

That handoff matters to the argument. Showing the math is not an ornamental reveal. It is a form of accountability. It lets someone else see the assumptions, change the values, and disagree productively with the result.

Conclusions I'm drawing from this exercise

Mathematics is often presented as the opposite of the human: objective where we are subjective, exact where we are uncertain. I have come to value it for the reverse reason. Precisely because it is structured, it gives us a way to move through subjectivity without pretending it has disappeared.

Parametric Geometry is a study in quantity, structure, space, and change. It is also a study in craft. A system can make many forms, but making is still the act of choosing what deserves to remain.

Public artifacts

  • Parametric Geometry - the live collection of 100 formula-built SVG studies.
  • How the lines come alive - the shared geometry, motion, and rendering system.
  • Open source - the directly installable React package for all 100 studies, raw SVG exports, TypeScript declarations, and contribution guide.
  • GitHub repository - source code released under the MIT License.
  • Of Math and Men - the earlier essay that supplied the project's deeper point of view.