Recreating Spotify equalizer inside a jsfiddle

HTML & CSS
1

I don’t know the rest of the code.

I was just wondering, what the rest of the code was.

How it was created.

https://open.spotify.com/

https://jsfiddle.net/v1gj9r2f/2/

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3.99902 14H5.99902V0H3.99902V14ZM-0.000976562 14H1.99902V4H-0.000976562V14ZM12 7V14H14V7H12ZM8.00002 14H10V10H8.00002V14Z" fill="#1DB954" />
</svg>

equaliz

Here is the gif that is used: https://i.imgur.com/xbbkU5I.gif

But, how is that used with the svg?

What purpose does the svg serve?

How does one get put with the other?

2

I was told this:

it’s just a static placeholder for reduced motion when the tab it out of focus

if you want to recreate something like it look into this

https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event

I still don’t understand how it is done.

Maybe something like this? https://jsfiddle.net/8kfgct6r/2/

body {
  background: #111;
  display: grid;
  place-content: center;
  min-height: 90vh;
}

.icon {
  width: 16px;
  height: 24px;
  background: url("https://i.imgur.com/xbbkU5I.gif") 0/100%;
  background-repeat: no-repeat;
}

.static .icon {
  background: url("data:image/svg+xml,%3Csvg id='a' width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.99902 14H5.99902V0H3.99902V14ZM-0.000976562 14H1.99902V4H-0.000976562V14ZM12 7V14H14V7H12ZM8.00002 14H10V10H8.00002V14Z' fill='%231DB954' /%3E%3C/svg%3E") 0/100%;
}

<div class="icon"></div>

window.addEventListener("blur", static);
window.addEventListener("focus", motion);

function static() {
  document.body.classList.add("static");
}

function motion() {
  document.body.classList.remove("static");
}

I was told this:

clicking outside the window replaces the gif with the svg

that’s how spotify uses those 2 images

3

That seems to be what most people have advised to do to stop the gif running in inactive tabs.

You should also do similar in a prefers reduced motion media query and switch the gif to a static gif in css.