CSS Styling

The first CSS file we’ll check out is style.css:

The first line imports the animation keyframes, which we will examine in a moment. First, let’s take a look at the styles for the main layout. The html and body elements are styled with the standard margin/padding reset and full height and width setting, and the output and section elements are styled with CSS3 Flexbox to allow them to scale proportionally with the screen.

The svg is set to 100% height and width to fill its parent container, and the g element, which contains the sinewave path itself, is given no fill and a stroke width of 1. The stroke color is driven by the animation defined for this element. Let’s check out that line and how it’s constructed:

animation: sinewave 2s linear infinite, crt 2s linear infinite;

This applies two animations separated by the comma delimiter: the sinewave keyframe animation, with a two-second duration and a linear animation curve that will run forever, and the crt animation with the same properties. Additional animations can be added, separated by commas as above.

Sliders are styled with slider and slider > thumb , and the set of thumb elements is given an animation property of its own:

animation: slider 0s linear infinite forwards;

The reason for 0s duration is that we’ll set the duration to a different value for each of the sliders, as follows:

slider:nth-child(1) > thumb { animation-duration: 2s; } slider:nth-child(2) > thumb { animation-duration: 5s; } slider:nth-child(3) > thumb { animation-duration: 3s; } slider:nth-child(4) > thumb { animation-duration: 4s; }

Each thumb gets a different animation-duration, meaning that each of them will slide up and down it’s track at a different speed, simulating controls on a control panel (such as an automated digital mixing console).