Tag Archives: spectrum


This project was made around the same time as the Reflections project, but I cannot remember which was written first.


Live page
GitHub repository


This project takes a parametric equation provided by the user and then makes pretty curves, where the colours reflect the values of the parameters. This is performed in much the same way as in the Reflections project, except this time the user has complete freedom of the form of the expressions. This is achieved by writing the expressions directly as a Javascript macro embedded in the SVG. This way the expensive and potentially dangerous eval function is avoided, as it is in the Inverter project.

The \((x,y)\) values are determined using functions of a variable, \(t\), and a parameter, \(q\):

\(x = f(t;q)\), \(y = g(t;q)\), where the different colours correspond to different values of \(q\).

This project was used to make the icon for the LGBT CERN Twitter and Facebook accounts.


Challenge: This project needed to have SVG and Javascript working together.
Solution: This is not easy! When embedding Javascript inside SVG is must be properly wrapped, and cannot use any external files. As a result that SVG file is often cumbersome and any libraries have to be written to the SVG file, making excessive use of Javascript unreasonable. (Although this didn’t stop me from trying to write an SVG based platform game.) (Resolved)
Challenge: This project required a smooth colour gradient for best effect.
Solution: This was one of the first times I needed to make a smooth colour gradient, and it is not as trivial as I might like. I found a way to quickly create an arbitrary colour gradient, which would help with many projects in the future, especially those that involve fractals. (Resolved)


Here is the output for \(x = 3\sin(q+2t\pi)\), \(y=t^2\), \(-1\lt t \lt 1\), \(0\lt q \lt 1\)

Screenshot for a Spectrum
Screenshot for a Spectrum