If you draw a perfectly constant function the decomposition doesn't work:

If you move the harmonic-count slider to the left and redraw the wave, the slider moves to the right. If you press Play right after redrawing the wave, the harmonics are there. If you keep spamming Play as the right side of the image animates into a filtered wave, the quieter (not necessarily upper) harmonics gradually fade into silence.

Question

• I am deeply attracted by your profile GIF，like the one at the bottom of your post
• Wondering how do you implement it？Could you share some ideas，or online tool to generate such sort of things

thanks～

Just noticed that in both translations (german and spanish) in the second to last paragraph the span "email-text" inserts english text ("email me at ...@..., or"). Can this be fixed by special span ids for each language or by editing the inserted text to be just your email address?
Also "homepage" is capitalsed in german.

thanks for the very nice demo.
I ran into an audio Problem trying the different buttons:

synth.js:23 Uncaught DOMException: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).
at playSoundWave (http://www.jezzamon.com/fourier/main.bundle.js:1051:24)
at HTMLButtonElement. (http://www.jezzamon.com/fourier/main.bundle.js:1442:36)
playSoundWave @ synth.js:23
(anonymous) @ main.js:59

it seems the number of open AudioContext's allowed varies. to test I used a connditional breakpoint to close them 100 ms after the decay ends:
window.setTimeout(() => audioContext.close(), decay*1000+100) && 0

Im not sure if closing the contexts or reusing one would be the better Route, its probably just a matter of style.

As one who studied signal processing, I disagree with the way the JPEG wavelets and the cat image are displayed. They shouldn't be displayed resampled but pixelated because only the values at integer coordinates matter.

This can be achieved with these extra CSS rules:

        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

Hi, is it possible to somehow obtain one frame of the animated drawing as a vector image?

I've installed the dependencies from the requirements.txt but when executing svg2pasths_ext.py I get this error
Traceback (most recent call last): File "C:\Users\vcand\Desktop\FourierFromSVG-master\svg2paths_ext.py", line 9, in <module> from svgpathtools.svg2paths import polyline2pathd ModuleNotFoundError: No module named 'svgpathtools.svg2paths' PS C:\Users\vcand\Desktop\FourierFromSVG-master>

Any help?
(I have no previous knowledge of Python so help is really appreciated)

Hi. One day, I saw the video of 3blue1brown and I thought I really want to make this animation. I found that, I found yours . but there was no simple svg to animation converter for the person like me. And I started to think I didn't even finished scratch guidebook. is that hard? ( https://www.youtube.com/watch?v=xXwQ0UUu-ww ) even this student doing? I searched more, And I found p5 code drawing fourier. It loads svg from gist but I have no idea to switch to my svg. I can't even upload pure svg link on web. like this ( https://gist.githubusercontent.com/mbostock/a4fd7a68925d4039c22996cc1d4862ce/raw/d813a42956d311d73fee336e1b5aac899c835883/fourier.svg ) I draw the star via inkscape, that also doesn't work. Is my svg is wrong or this isn't place for someone wants just interesting animations? Please help me

A few of the labels use English text in the Javascript, so these don't get translated properly in the translations. Would be good to set up something so they do get translated

img-component-container is not HiDPI compatible.

Normally:
Imgur

HiDPI (can be emulated by scaling the browser to 200% zoom):

Imgur

The tiles get more than twice as wide. The vertical pitch gets much less than 2 times as big. Text overlaps the images.