Fourier Drawing With SVG Epicycles
Reconstruct a closed hand-drawn path from an edited set of complex coefficients while controlling approximation error, visual hierarchy, and motion.
Fourier drawing turns a closed hand-drawn path into rotating vectors whose endpoint reconstructs the original gesture. The interesting decision is not whether enough harmonics can copy the curve, but which small ordered set preserves its identity without turning the animation into visual accounting.
Coefficient selection is treated as an edit. Sampling, closure, parameterization, error, circle hierarchy, motion preference, and export all belong in the proposed receipt so the drawing remains a piece of authored vector work rather than a math demo.
The vocabulary connects SVG epicycles, discrete Fourier transform, path reconstruction, and harmonic drawing once each while staying focused on controlling complexity and motion. That vocabulary supports the article's Fourier drawing decision without creating a second intent.
- Samples
- Coefficients
- Epicycles
- Trace
Fourier drawing starts with a closed path
The transform expects a periodic sequence, so the source gesture needs an intentional seam rather than an accidental jump. The FFTW transform definition states the sign and normalization conventions needed to reproduce the complex transform. The seam turns an authored gesture into a periodic signal, so its position and tangent jump shape every later coefficient. A proposed review of “Fourier drawing starts with a closed path” has four inspectable moves.
- Choose or construct a closed contour
- Place the seam in a quiet region
- Remove duplicate terminal samples
- Normalize translation and scale
The proposed evidence for fourier drawing starts with a closed path is the endpoint gap and tangent change at the seam. The fourier drawing starts with a closed path receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is forcing an open signature into a loop and blaming the transform for ringing. If forcing an open signature into a loop and blaming the transform for ringing occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the periodic source closes within the declared geometric tolerance. Promotion under “the periodic source closes within the declared geometric tolerance” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Sample by an explicit parameter
Equal SVG parameter steps are not necessarily equal travel distances, and dense control-point regions can dominate the spectrum. The SVG specification defines the source path, vector circles, traced output, and accessible static composition. Arc-length and parameter sampling assign different weight to the same curve; the choice is part of the reconstruction, not preprocessing trivia. A proposed review of “Sample by an explicit parameter” has four inspectable moves.
- Compare parameter and arc-length sampling
- Fix sample count
- Preserve path orientation
- Plot distances between adjacent samples
The proposed evidence for sample by an explicit parameter is coefficient and error changes under the two sampling policies. The sample by an explicit parameter receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is letting authoring-tool control points define unintended visual weight. If letting authoring-tool control points define unintended visual weight occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is choose the sampling rule whose reconstruction preserves the drawn gesture. Promotion under “choose the sampling rule whose reconstruction preserves the drawn gesture” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Read the harmonic spectrum
Magnitude shows geometric contribution, while signed frequency and phase determine rotational direction and placement. The Web Animations specification defines timing concepts used for an optional deterministic playback layer. Magnitude alone does not explain an epicycle because signed frequency and phase control direction, position, and rhythm. A proposed review of “Read the harmonic spectrum” has four inspectable moves.
- Keep the zero-frequency center visible
- Pair positive and negative frequencies
- Plot magnitude on a readable scale
- Retain transform convention in the caption
The proposed evidence for read the harmonic spectrum is reconstruction error as terms are added in a declared order. The read the harmonic spectrum receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is sorting magnitudes without explaining how the animation sequence changes. If sorting magnitudes without explaining how the animation sequence changes occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the chosen ordering serves legibility and reproduces the same endpoint trace. Promotion under “the chosen ordering serves legibility and reproduces the same endpoint trace” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
| Signal | Decision | Evidence |
|---|---|---|
| 8 terms | Iconic | 12.4 px RMSE |
| 24 terms | Ship | 3.1 px RMSE |
| 96 terms | Reject | 0.8 px · noisy |
Test transform and inverse
A small complex-number fixture catches sign, scale, and index conventions before circles make the error look poetic. Known constant and sinusoidal sequences expose transform sign and normalization errors before the circles make those errors look intentional. A proposed review of “Test transform and inverse” has four inspectable moves.
- Transform a constant sequence
- Transform one known sinusoid
- Reconstruct every sample
- Assert dtype-aware error
The proposed evidence for test transform and inverse is round-trip maximum error on hand-computable sequences. The test transform and inverse receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is normalizing both forward and inverse operations. If normalizing both forward and inverse operations occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the inverse reproduces the source samples within the declared tolerance. Promotion under “the inverse reproduces the source samples within the declared tolerance” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Runnable artifact. Save this bounded specimen as fourier-drawing-svg-epicycles.test.mjs and run node --test fourier-drawing-svg-epicycles.test.mjs. Expected result: PASS: constant signal stays at frequency zero.
import assert from "node:assert/strict";
import test from "node:test";
const dft = xs => xs.map((_,k) => xs.reduce((sum,x,n) => sum + x*Math.cos(-2*Math.PI*k*n/xs.length),0)/xs.length);
test("finds constant component", () => {
const c=dft([2,2,2,2]); assert.ok(Math.abs(c[0]-2)<1e-9); assert.ok(c.slice(1).every(x=>Math.abs(x)<1e-9));
console.log("PASS: constant signal stays at frequency zero");
});
Choose the fewest useful harmonics
Approximation error should inform the edit without dictating it, because tiny high-frequency terms can add more motion than identity. The smallest recognizable coefficient set often explains the drawing better than the numerically closest reconstruction. A proposed review of “Choose the fewest useful harmonics” has four inspectable moves.
- Render a logarithmic term-count ladder
- Measure positional error
- Ask when the gesture becomes recognizable
- Keep a high-count control
The proposed evidence for choose the fewest useful harmonics is perceptual recognition beside RMS and maximum error. The choose the fewest useful harmonics receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is equating lowest numeric error with strongest visual explanation. If equating lowest numeric error with strongest visual explanation occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is stop when new terms cease to add meaningful contour character. Promotion under “stop when new terms cease to add meaningful contour character” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Art-direct the epicycle chain
Circle weight, vector contrast, trail length, and term order decide whether the mechanism supports or overwhelms the drawing. Circle hierarchy should favor structural terms and the traced gesture, allowing tiny high-frequency guides to recede instead of sparkle. A proposed review of “Art-direct the epicycle chain” has four inspectable moves.
- Emphasize only structural circles
- Fade small high-frequency terms
- Keep the endpoint unmistakable
- Separate guide and final-trace palettes
The proposed evidence for art-direct the epicycle chain is a still-frame hierarchy check at mobile width. The art-direct the epicycle chain receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is giving every coefficient equal visual weight. If giving every coefficient equal visual weight occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the reconstructed gesture remains the primary reading at every supported size. Promotion under “the reconstructed gesture remains the primary reading at every supported size” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
- SampleSample
Resample a closed path at an explicit parameter and count.
- TransformTransform
Compute signed-frequency complex coefficients.
- EditEdit
Order or curate terms against visible error.
- RenderRender
Draw circles, vectors, trace, and a complete still fallback.
Make motion optional and deterministic
The complete drawing should exist before animation, with playback adding explanation rather than access to the result. Elapsed-time phase makes motion deterministic, while the complete still keeps the result available to reduced-motion readers. A proposed review of “Make motion optional and deterministic” has four inspectable moves.
- Render the final path as a still
- Respect reduced motion
- Drive phase from elapsed time
- Pause when hidden or offscreen
The proposed evidence for make motion optional and deterministic is matching endpoint positions at fixed timeline fractions. The make motion optional and deterministic receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is incrementing phase per frame and changing speed by device. If incrementing phase per frame and changing speed by device occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the same timestamp produces the same geometry, while still mode communicates the thesis. Promotion under “the same timestamp produces the same geometry, while still mode communicates the thesis” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Publish the coefficient edit
A trace can be reconstructed in another renderer when source samples, transform convention, selected terms, and scale travel together. Samples, convention, selected terms, order, scale, and output hashes turn the coefficient edit into a portable vector artifact. A proposed review of “Publish the coefficient edit” has four inspectable moves.
- Save normalized samples
- Save complex coefficients
- Save order and cutoff
- Hash still and animated path output
The proposed evidence for publish the coefficient edit is clean-process reconstruction at several timeline fractions. The publish the coefficient edit receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this Fourier drawing decision is exporting a video that erases the system underneath. If exporting a video that erases the system underneath occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the complete still and selected moving construction reproduce from one receipt. Promotion under “the complete still and selected moving construction reproduce from one receipt” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Keep the boundary visible
Close and sample the source gesture deliberately, prove the transform convention, then edit the coefficient set against both error and recognition. The fewest useful vectors make the mechanism easier to see.
A complete still, reduced-motion behavior, deterministic timing, and serialized coefficients let the piece remain accessible and reproducible without taking away its wonder.
Continue through four related field notes: SVG path morphing, accessible data sonification, spring motion design, SDF typography. Each extends the Fourier drawing method without changing this article's single search intent.