SVG to Desmos

Apply FFT compression to convert SVG images to optimized Desmos graphs without using lengthy piecewise Bézier splines.

Directly based on this Twemoji-to-Desmos experiment: https://github.com/harry7557558/miscellaneous/tree/master/twemoji-to-desmos

Indirectly based on a school project from a grade 12 CS class.

How it works

• Get all figures with fill from an SVG (partially supports defs and transform)
• Apply arc-length parameterization to convert paths to discrete points
• Scale the points appropriately (larger => higher quality)
• Apply Fast Fourier Transform to fit the points using trigonometric basis functions
• Round the amplitudes to the nearest integers and discard basis functions with a zero amplitude
• Convert trigometric series to LaTeX expressions compactable with Desmos
• Merge shapes with the same color into a single expression to reduce graph size (greedy algorithm, requires resolving shape layering)
• Split very long expressions into multiple expressions to prevent the "Definitions are nested too deeply" error
• Define repeated long LaTeX expressions as functions to reduce graph size (and make it run faster)
• Put all LaTeX expressions and functions together into a Desmos state
• Generate and run JS code that exports the state to Desmos

The __name__ == "__main__" is in svg_to_desmos.py.

Gallery

A hermit crab I created for a school project in my grade 10 year - 16,978 bytes • 32 expressions

(This is the only non-monochromatic SVG I could find on my computer. This tool works nicely for colored SVG files just like it works for monochromatic SVGs, I promise!)

Chinese paper cutting I designed for the same course - 38,415 bytes • 6 expressions

A rectangular map of the world - 16,239 bytes • 4 expressions

Some equations generated by MathJax - 35,448 bytes • 53 expressions

(Small self-promotion: you may be interested in my 3D implicit surface grapher)

The logo of the University of Toronto - 19,390 bytes • 7 expressions