Circle Inversion Art Preserves Tangencies
A test-led circle inversion workflow that turns lines and circles into dramatic arcs while preserving geometric provenance, tangency, and output discipline.
Circle inversion art turns a calm arrangement of lines and circles into compressed nests, sweeping arcs, and sudden lines while preserving the magnitude of angles. The transformation is dramatic precisely because its rule is so spare: distance from the inversion center maps to reciprocal distance.
The visual practice becomes credible when singularities, round trips, circle-to-line cases, and tangencies are tested before styling. The source geometry and transformed composition remain linked by stable IDs rather than by a flattened path that can no longer explain itself.
Circle inversion art begins with one involution
For inversion center (c) and radius (R), a point (p e c) maps along the same ray so that (|p-c||p'-c|=R^2). Points on the inversion circle remain fixed, nearby points fly outward, and distant points compress inward. Applying the same inversion twice returns the original point within numerical tolerance.
The Cambridge Geometry and Groups notes place inversion among circle and Möbius geometry and state its core properties. In code, the round trip is the first control. Inversive geometry becomes an artistic material only after the implementation can distinguish a valid large coordinate from overflow near the center.
The artifact tests axis points, fixed boundary points, quadrants, round trip, radial product, and the center singularity. Circle inversion art should add scale-relative tolerances and explicit maximum coordinates for the target output. Do not clamp a near-center point into a plausible arc; clipping may be a later visual decision, while the geometry layer should report the singular or out-of-bounds result honestly.
Runnable artifact: The point inverter proves the reciprocal-radius invariant, involution, fixed boundary, signed quadrants, finite output, and a hard singularity at the center.
Save this worked fixture as circle-inversion.test.mjs and run node circle-inversion.test.mjs. Expected final line: PASS: 10 inversion assertions.
import assert from "node:assert/strict";
function invert([x,y],radius=10){const q=x*x+y*y;if(q===0)throw Error("singularity");const s=radius*radius/q;return [x*s,y*s]}
const close=(a,b,e=1e-9)=>Math.hypot(a[0]-b[0],a[1]-b[1])<e;
let n=0;const check=fn=>{fn();n++};
check(()=>assert.deepEqual(invert([5,0],10),[20,0]));
check(()=>assert.deepEqual(invert([20,0],10),[5,0]));
check(()=>assert.ok(close(invert(invert([3,4])),[3,4])));
check(()=>assert.ok(close(invert([10,0]),[10,0])));
check(()=>assert.throws(()=>invert([0,0]),/singularity/));
check(()=>assert.equal(Math.hypot(...invert([2,0]))*2,100));
check(()=>assert.ok(invert([1,1]).every(Number.isFinite)));
check(()=>assert.ok(close(invert([-3,4]),[-12,16])));
check(()=>assert.ok(close(invert([3,-4]),[12,-16])));
check(()=>assert.ok(close(invert([3,4]),invert([3,4]))));
assert.equal(n,10);console.log("PASS: 10 inversion assertions");
- A tangent grid bends through the inversion circle
- Construction logic
- Interpretive outcome
Transform circles analytically when you can
Sampling a circle into points and inverting each point works for display, but adaptive sampling must chase extreme curvature and can create seam or tangency errors. An analytic circle transform gives the new center and radius directly when the source circle does not pass through the inversion center. If it does pass through the center, the result is a line—a required geometric type, not an infinite circle to approximate badly.
The Wolfram MathWorld inversion reference provides a resolving construction, equations, and references for geometric inversion. A production implementation should test known source circles on, inside, outside, and through the inversion boundary. The conformal circle transform preserves angle magnitude locally while reversing orientation; it does not preserve length, area, centers, or uniform stroke appearance.
Store generalized output as circle or line with source ID, orientation, transform ID, and residual tests. Circle inversion art needs that union type before SVG serialization. Then a line can clip to the viewport deliberately, a circle can use a true arc, and a reviewer can understand why one member of an otherwise circular family suddenly became straight.
Test tangency without trusting the picture
For source circle pairs, classify external tangency, internal tangency, intersection angle, separation, or coincidence with scale-aware residuals. Transform both, repeat the relationship test, and compare. A raster preview can hide a gap below one pixel or make two thick strokes appear tangent when center geometry disagrees. The invariant belongs to shapes before stroke.
The Geometry Junkyard note connects circle inversion and tangency constructions. Use a small set of known tangent circles and lines as the reference. Circle inversion art should preserve source IDs through the transformed tangent-circle SVG, allowing an explanatory hover or static legend to highlight corresponding pairs without forcing assistive technology through every decorative arc.
Test near-tangent and clearly non-tangent controls so tolerance cannot accept everything. Add a source circle that almost passes through the inversion center, because its transformed radius will stress numeric range and output clipping. Report the worst invariant residual and which pair produced it. “Looks continuous” is an art-direction judgment; “tangency preserved within tolerance” is a geometric claim.
| Source shape | Relation to center | Output | Risk |
|---|---|---|---|
| Circle | avoids center | circle | large radius near center |
| Circle | passes center | line | unsupported type |
| Line | avoids center | circle through center | viewport clipping |
| Point | equals center | undefined | hard singularity |
Art-direct where the inversion center sits
The inversion center is a compositional instrument. Place it on a symmetry axis to produce a formal medallion; near a source tangency to stretch one junction into a sweeping seam; or outside the source field to create a directional wave. Compare positions against the same source geometry. Changing both at once makes the transformation impossible to read.
Three named variants can organize the family. “Lens” centers inversion inside a regular circle grid. “Horizon” places it on one source circle, admitting line outputs.
“Tidal” moves it outside a tangent chain, compressing one end and expanding the other. Circle inversion art should predict how each position redistributes scale, negative space, and crop tension.
Superformula generative art generates contour families through parameters; strange attractor posters accumulate dynamics into density. Inversion instead transforms an already legible source. Preserve the source diptych or a small inset so the visual intelligence comes from seeing correspondence, not only from encountering complicated arcs without cause.
- 1Verify source
Name circles, lines, tangent pairs, orientation, and source bounds.
- 2Set inversion
Record center, radius, viewport, numeric range, and line-case support.
- 3Transform + test
Check round trips, primitive types, tangencies, angles, and singular cases.
- 4Compose + proof
Choose crop, stroke strategy, color, labels, accessibility, and physical output.
Separate geometric stroke from visual weight
Inversion maps geometry, not a pen's width. A uniform post-transform stroke gives consistent output weight but does not resemble an inverted band. Transforming both boundaries of a source band creates a geometrically faithful variable region but may explode near the center. Decide whether lines represent loci or material strips, and state the choice.
Color can encode source family, transformed scale, or orientation. Use OKLCH color foundations to keep lightness roles intentional across dense overlaps. Circle inversion art benefits from one stable accent marking the inversion boundary and restrained color elsewhere. Avoid glow that obscures whether arcs meet.
If interaction lets the reader drag the center, bound it, debounce heavy geometry, and offer keyboard controls plus numeric fields. Reduced motion should show a selected still or step changes, not continuous deformation. SVG path morphing addresses interpolated paths, but a circle-to-line type change is better rendered from current geometry than coerced through unrelated path point counts. Preserve a static source/result diagram when scripting is unavailable.
Make output scale part of the transform receipt
Large transformed circles may intersect the viewport as nearly straight arcs. Clip analytically or with SVG, but retain the full primitive in data. Set budgets for coordinate magnitude, paths, samples, render time, and export bytes. A Möbius geometry art edition that requires infinite canvas is not an output plan; the viewport is part of its argument.
For plotting, approximate arcs within chord-error tolerance and control pen lifts, boundary clipping, and repeated tangent passes. For print, inspect minimum gaps, maximum stroke accumulation, antialiasing, trim, and registration. A thick tangent junction can form a dark knot; decide whether that is a focal mark or a defect. Proof the highest curvature and nearly straight region together.
Accessibility needs a concise description of the source, inversion boundary, transformed scale gradient, major arcs, and crop. Provide a semantic case table rather than announcing every circle. Archive source primitives, transformed primitives, invariant residuals, transform parameters, styling, output, and a plain-line control. The reader should be able to separate topology, transformation, and surface treatment.
A final contact sheet should pair the plain source, neutral transformed geometry, and finished crop at matching scale. That careful comparison makes it possible to review correspondence, invariant, and art direction without asking one polished frame to prove all three layers at once.
Publish correspondences, not only the spectacle
The final circle inversion art receipt records source IDs, source validation, inversion center and radius, numeric strategy, circle/line outputs, singularity decisions, round-trip errors, tangent-pair residuals, viewport, crop, stroke semantics, color, renderer, accessibility, and physical proof. Include at least one failed near-center configuration and why it was rejected or clipped.
Reject an edition that clamps singularities invisibly, approximates line cases as giant unstable circles, loses source correspondence, or uses stroke effects to fake tangency. Test a neutral outline. The work should remain compelling when its invariant is visible rather than buried under polish.
The visual payoff comes from holding familiarity and distortion together. The viewer recognizes circles, grids, and contact, yet scale behaves like a field around an invisible force. The mathematical receipt does not diminish that sensation. It sharpens it: every sweeping arc is connected to a modest source shape, and every dramatic compression follows the same reversible rule.