Hypotrochoid SVG for Generative Posters
Turn an inside-rolling-circle equation into a reproducible poster edition with exact closure, measured sampling, accessible SVG, and plotter-facing audits.
Hypotrochoid SVG turns one rolling-circle equation into a family of rosettes, but the interesting work begins after the formula. This tutorial makes closure period, sampling, crossings, line rhythm, and export provenance visible enough to treat the curve as an authored poster rather than a mystery preset.
Hypotrochoid SVG begins with three distances
A fixed circle has radius R. A smaller circle of radius r rolls inside it without slipping. A tracer sits d units from the rolling circle's center. Those three distances create a rolling-circle curve with far more character than a generic “flower” slider.
The design outcome is a reproducible edition: integer radii, a declared tracer offset, an exact closure period, a bounded sample count, a style recipe, an accessible description, and a numerical audit. The MacTutor hypotrochoid reference supplies the inside-rolling definition and standard parameterization. The composition, period derivation, sampling policy, and receipt here are original implementation choices.
Keep the construction visible while exploring. The fixed circle describes the field; the rolling circle explains the compound motion; the tracer arm makes d tangible. Once a curve is selected, the construction can recede into a thin annotation while the line becomes the artwork. That separation gives a hypotrochoid SVG both an intelligible mechanism and a deliberate poster hierarchy.
This is not the same problem as reconstructing a sampled gesture with Fourier drawing and SVG epicycles. Here the author chooses one exact mathematical family first, then edits its rhythm and presentation.
- 1 · R
- Fixed-circle radius from origin to boundary.
- 2 · r
- Radius of the internally rolling circle.
- 3 · Contact
- No-slip contact point on the fixed circle.
- 4 · d
- Tracer distance from the rolling center.
- 5 · t and terms
- Center uses (R−r)(cos t, sin t); tracer adds d(cos((R−r)t/r), −sin((R−r)t/r)).
Translate rolling motion into coordinates
For an inside roll, let a = R - r. At parameter t, the rolling center follows (a cos t, a sin t). The tracer rotates relative to that center at frequency a/r, producing x(t) = a cos t + d cos((a/r)t) and y(t) = a sin t - d sin((a/r)t). The minus sign expresses the opposing inner rotation.
SVG's y-axis points downward. You may negate computed y values or transform the drawing group, but declare which convention owns the flip. Mixing both silently mirrors the edition. Keep the geometry in a mathematical coordinate system, calculate metrics there, and apply one display transform at the boundary.
Take R=5, r=3, d=5. Then a=2, so the center turns once per 2π while the tracer term advances at two-thirds that rate. At t=0, the point is (7,0). At t=3π, the center is (-2,0) and the tracer term has completed two radians-of-turn multiples; the curve is not yet back at its start. This worked fixture makes the second frequency and inner-roll sign reviewable instead of burying them in a generated d string.
A hypotrochoid SVG should expose this equation in its receipt. If a later refactor flips the sign or substitutes R/r, a selected-point oracle will fail before the poster changes unnoticed.
Reduce the ratio before choosing the period
Closure comes from requiring both angular terms to repeat. For integer radii, reduce the pair with g = gcd(R,r). The period is T = 2πr/g. This article derives that expression from the two frequencies; it is not quoted from the curve reference.
For R=5 and r=3, the greatest common divisor is one, so T=6π. Stopping at an arbitrary 2π returns the fixed-circle term but not the tracer term: its phase advanced only 4π/3. A Z command can draw a line back to the start, visually hiding the incorrect period. That is closure by cover-up, not curve closure.
Generate the endpoint at the full symbolic period and measure its distance from the first point before changing any coordinates. Floating trigonometry generally leaves a tiny nonzero seam. Preserve that unsnapped seam error in the receipt, then replace only the exported final point with the exact first point and close with Z. The method distinguishes mathematical closure, floating evaluation, and explicit file closure.
The same ratio discipline separates this family from layered guilloché SVG patterns. A hypotrochoid SVG has one inside-roll contract; ornamental layering can happen later without rewriting its period proof.
Sample the curve without flattening its rhythm
Uniform parameter steps are a strong default because they preserve the equation and make reruns simple, but they do not produce uniform line segments. High-curvature regions may receive long chords while gentle arcs get dense points. Measure minimum, median, and maximum segment length plus the coefficient of variation instead of assuming the sample count is sufficient.
Choose a bounded budget before generating points. The lab accepts 96–2,048 samples and creates exactly samples + 1 evaluated points. Six-decimal rounding happens after all geometry and audit calculations; rounding coordinates before measuring changes path length, bounds, seams, and intersection decisions. The same-engine canonical export is byte stable, while cross-engine transcendental results are compared within a tolerance.
Uniform sampling is often enough for a screen poster at a declared viewBox and stroke width. Increase samples when the maximum segment creates visible faceting, not just because a slider permits it. If the min-to-max spread is extreme, adaptive arc-length sampling may be a future technique, but that would be a different algorithm and receipt.
A hypotrochoid SVG earns precision by showing its point budget and segment rhythm. The aim is not the largest file; it is the smallest bounded sample that preserves the selected line at its target scale.
| Marker | R:r:d | Reduced ratio | Period | Samples | Unsnapped seam | Approx. crossings | Verdict |
|---|---|---|---|---|---|---|---|
| Circle | 8:3:2 | 8:3 | 6π | 384 | 1.2246468e−15 | 16 | curtate; keep generous center |
| Triangle | 6:2:2 | 3:1 | 2π | 320 | 0 | 0 | hypocycloid; sharp corners |
| Square | 7:3:5 | 7:3 | 6π | 512 | 1.95943488e−15 | 21 | prolate; inspect crossings |
| Diamond | 5:3:5 | 5:3 | 6π | 480 | 9.79717439e−16 | 5 | keep as wrong-2π witness |
Reading rule: labels, patterns, markers, and the semantic content carry every conclusion; color is supplementary.
Art-direct a contact sheet, not a slider
A free slider encourages accidental favorites. A contact sheet asks for comparison. Freeze several R:r:d recipes, render them at the same optical scale, and annotate reduced ratio, period multiplier, samples, seam error, crossings, and a short selection verdict. Rejected studies remain useful evidence.
The tracer position changes the family. d < r is curtate; d = r reaches the rolling circle and forms a hypocycloid; d > r is prolate and tends to loop. Those labels describe geometry, not aesthetic quality. A dense prolate center can be dramatic on screen and troublesome for a pen; a restrained curtate orbit may hold negative space better at small sizes.
Treat line hierarchy as part of the recipe: main stroke width, construction stroke, palette tokens, background, crop, and caption placement. Avoid using hue alone to identify candidates; the contact sheet combines marker shapes, numbers, and text verdicts. Lissajous letterforms offer another harmonic vocabulary, but their independent axis frequencies are not a substitute for rolling contact.
The chosen hypotrochoid SVG should have a reason: perhaps its five-fold outer rhythm supports a headline block, or its center remains breathable after a thumbnail test. Authorship lives in that selection and framing, not in exposing every parameter.
Audit the path for screen and plotter
Start with seam error, duplicate consecutive points, bounding box, path length, and segment-length statistics. Then count approximate proper intersections between nonadjacent segments with a documented epsilon and endpoint exclusion. The count is a warning, not a topology proof: near tangencies and finite sampling can change it.
Screen checks ask whether the curve fits the viewBox, survives the chosen stroke width, and remains legible in light, dark, high-contrast, narrow, and zoomed views. Physical checks add paper size, pen width, drawing speed, material, mechanical backlash, and repeated crossing buildup. Mathematical closure does not certify a clean plotted object.
The seam microscope keeps three states visible. A wrong 2π endpoint is far away for 5:3; the correct 6π endpoint is numerically close before snapping; the exported endpoint equals the first point and is followed by Z. Showing all three prevents the file format from laundering the derivation.
Before plotting filled or hatched companions, use pen-plotter hatching to plan physical marks. This article's hypotrochoid SVG can report “screen checks passed” and “plotter inspection required,” never an unperformed plotter-safe claim.
- Fail:
R=5,r=3stopped at2π; the endpoint remains visibly open. - Pass: the derived
6πperiod returns within the declared numerical tolerance before snapping. - Export: final point equals the first and
Zcloses the path, while the unsnapped error stays in JSON. - Approximate: intersections use sampled nonadjacent segments and endpoint exclusions.
- Required: physical plotter inspection; mathematical closure is not material proof.
Export accessible reproducible SVG
A portable edition begins with M, continues with bounded L segments, and ends with Z. This parametric SVG path follows the SVG 2 path specification for path-data grammar and close-path behavior. Put a <title> and <desc> inside the standalone SVG, declare the viewBox, and keep styling local so the file survives outside the site.
The surrounding article needs a visible semantic equivalent, not only hidden text. WCAG 2.2 Non-text Content is the governing accessibility requirement; the table and audit list here communicate parameters, period, sampling, and conclusions without requiring vision. The picture may remain richer than prose, but its thesis cannot be trapped in pixels.
Export two receipts. Canonical JSON holds schema and formula versions, normalized inputs, reduced ratio, exact period expression, rounding precision, geometry hash, SVG hash, metrics, style tokens, and limitations. Standalone SVG holds the authored pen-plotter rosette and accessible name. Hash points before presentation so a palette edit does not masquerade as new geometry.
Parse only known numeric controls and fixed style enums. Never accept arbitrary markup, remote fonts, or script. A hypotrochoid SVG becomes collectible and reviewable when its recipe and boundaries travel with it.
Publish the curve edition
The final receipt should answer eight questions: which R:r:d recipe; which reduced ratio; which symbolic period; how many samples; what unsnapped seam; what segment and intersection warnings; which viewBox and stroke; and which hashes identify geometry and presentation. Keep the rejected contact-sheet studies with their verdicts.
State the limits plainly. Approximate intersections depend on sampled segments and epsilon. Same-engine bytes are deterministic for the frozen fixture, but trigonometric implementations are not promised to match byte-for-byte everywhere. “Screen checks passed” describes automated geometry and layout checks; a physical pen, paper, and machine still require inspection.
A strong hypotrochoid SVG poster is neither a raw equation nor a decorative preset. It is an authored curve edition whose mathematical closure, numerical seam, point rhythm, accessible equivalent, and material uncertainty are visible together. That record makes later palette, scale, or fabrication changes intentional rather than mysterious.
Runnable local artifact — The lab proves numerical screen checks for a sampled curve; it does not certify physical plotter safety or universal cross-engine byte identity.
Reduce integer radii with Euclid's algorithm, sample exactly one symbolic period, preserve the unsnapped seam, cap intersection work, and export same-engine deterministic SVG and JSON.