An Animated Visualization of the Fourier Transform
This should work with recent desktop versions of Chrome or Firefox. It was coded using Vanilla JS and MathJax.
Click or right-click into the upper graph or press the left/right arrows to change the input function $f$. Press 1, 2, 3, or 4 to select an integer frequency $\xi$ or click anywhere into the lower right graph to select any frequency.
Press r to display the real part of the transform, i for the imaginary part, or a for the absolute value. Press n for no display (which is the default). (Or click on the left of the vertical axis to switch between these four views.) Use the up/down arrows to change the factor $L$ and use 0 to reset this factor to one. Use q to restart the animated dots at $t=0$.
Note that the black dot isn't really showing the integral but a scaled version of it (so that it fits) - it's rather like the "centroid" of the orange curve.

Copyright (c) 2018, Prof. Dr. Edmund Weitz. Impressum, Datenschutzerklärung.
$\color{lightgray}{\mathbb{C}}$ $\color{lightgray}{f(t)}$ $\color{lightgray}{f(t)\mathrm{e}^{-2\pi\mathrm{i}\xi t}}$ $\displaystyle\color{lightgray}{\int_{-6L}^{6L}\!f(t)\mathrm{e}^{-2\pi\mathrm{i}\xi t}\,\mathrm{d}t}$ $\color{lightgray}{L=}$ 1 $\color{lightgray}{t}$ $\color{lightgray}{\xi}$