More Articles
RSS

Feb 2023

Animated equalizer

I thought I'd try to make a quick CSS only equalizer as part of a prototype for integrating what I'm currently listening to into my site. Here I explore a CSS + SVG equalizer using CSS animations.

<html>
<head>
<style>
@keyframes eq-bar { 0% { y: 10 } 25% { y: 6 } 30% { y: 6 } 75% { y: 0 } 100% { y: 10 } }
svg { width: 60px;  }
rect { animation: eq-bar 0.8s ease-out infinite; }
rect:nth-child(1) { animation-delay: 0s; }
rect:nth-child(2) { animation-delay: 0.4s; }
rect:nth-child(3) { animation-delay: 0.6s; }
rect:nth-child(4) { animation-delay: 0.2s; }
html,body { margin: 0; width: 100%; height: 100%; }
body { display: flex; align-items: center; justify-content: center; color: #00ff66; background: #1a1a1a }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11">
  <rect fill="currentColor" x="0" y="10" width="2" height="11"/>
  <rect fill="currentColor" x="3" y="10" width="2" height="11"/>
  <rect fill="currentColor" x="6" y="10" width="2" height="11"/>
  <rect fill="currentColor" x="9" y="10" width="2" height="11"/>
</svg>
</body>
</html>

The SVG is a simple set of four rectangles, which I place at an equal distance apart to start.

Each rectangle is referenced by the nth-child pseudo selector in order to give each a custom animation delay to create a random visual effect.

During the animation, the position of the y value changes (not the height). The overflow of the rectangles is not visible because its out of range of its viewBox.