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.

How to use it

• Put the path to your svg file at the bottom of svg_to_desmos.py or at the top of the main function in main.py, then run the python.
• Go to Desmos.
• Open the browser console (on chrome you right click and hit inspect element), and paste in the contents of desmos.js OR
• Go to desmos.txt and paste the expressions in one by one if you dont have access to the console (on school computers for example). Make sure to manually adjust the settings and apply the colors, as this option wont do it automatically.

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