← All elements
<div class="sv"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>About this animation
A symmetric audio visualiser of twelve centred bars bouncing at different speeds.
How it works
Twelve bars share a height animation, and nth-child rules vary their durations and delays so they never move together. alternate direction makes each bar rise and fall smoothly.
Ways to customise it
- Add or remove bars.
- Change the gradient.
- Increase 76px for taller peaks.
Good to know
Motion is switched off under reduced motion. If the visual represents live audio, say so in text nearby.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.