I've always been a sucker for basic physics. You know, the stuff introduced in elementary school, teaching us how physical objects can react and interact with the world around it. Recreating some of these physical phenomena in a digital environment is quite often done, e.g. in the world of gaming, but can it be done in a browser using fairly traditional tools?

I'd say that the only thing not accurately represented in the above example is the perpetual motion of the pendula — they will never stop swinging. Other than this fact, this demonstration shows a little phenomena called a "pendulum wave". The pendulum wave consists of a series of pendula with increasing swing periods, so that when simultaneously released, produce the effect of a changing transverse wave that cycles back to the beginning conditions. This wave diminishes in wavelength, then looks very chaotic, then comes back to the straight line from which it started. The lengths of each pendula is related to the one next to it in a way that after a certain number of swings, they are back in phase with each other.

In case you're wondering — no, I am not refering to the `animation-delay` property in CSS. I'm simply talking about the slight delay caused by the increasing lengths of each individual pendula. Consider the following:

```  ```@for \$i from 1 through 10 {
\$length: \$p-max-length - 16 * (\$i - 1);
\$G: 9.8;
\$period: 3.1417 * sqrt((\$length/100) / \$G);
\$animation-duration: \$period/2;

.pendulum-#{\$i} {
bottom: 16px * (\$i - 1);
transform-origin: center -#{\$length}px;
animation-duration: #{\$animation-duration}s;
z-index: -#{\$i};

&:before {
animation-duration: #{\$animation-duration}s;
}
&:after {
height: #{\$length}px;
}
}
}
```
```

In this particular demonstration, `\$p-max-length` and `\$p-radius` is set to `512` and `32`, respectively. Hence, we can quickly see that we decrease the length for each iteration, causing the first pendula to be the longest. The `\$period` equation represents a very rough take on the formula `T = 2π √L/g`, or:

The shading effect created by the lamp (hold down shift to see it in effect) is used by simply applying a gradient with the same exact animation timing, rotating it from minimum swing degree to maximum.

### A simplified example

Phew, that was quite a deep dive, wasn't it? If you'd like an example with things a bit simplified, have a look at the following:

For each increment in this example, we increase the width and height by `2em`, decrease the `top` position by `-1vmax`, center each pendulum with `calc(50% - size/2)`, and increase the animation duration with `.01` seconds. The slight increase in duration, together with the larger sizes, creates basically the same pendulum wave effect as we had in the first example.