Demonstration of coloring beams with SVG gradient filters.

Coloring stems, beams, and ties

The following example demonstrates a more complicated setup for coloring all aspects of the notation. Pitch classes control the coloring of noteheads, stems, tied and beams, with the beams being given a color gradient according to the pitch classes of the first and last note in the beam.

View the Markdown source for this page to view the CSS and JavaScript code for the example.