Dalek logo

by Julien Roche

HTML

<figure class="avatar">
  <section class="avatar__wrapper">
    <img class="avatar__wrapper__image" src="https://avatars.githubusercontent.com/u/244999?v=4" title="Exterminate all humans" />
  </section>
  <audio preload="auto" loop="loop">
    <source src="https://soundboardguy.com/wp-content/uploads/2022/06/exterminate.mp3" />
  </audio>
</figure>

<div class="avatar-notice">EXTERMINATE!! EXTERMINATE!!</div>

CSS

body {
  --color-dark: #050A06;
  --color-grey: #81827F;
  --color-white: white;
  --image-size: 7rem;
  --avatar-size: 8rem;
  --border-size: 0.25rem;
  --border-size-max: 1rem;
  --border-radius-size: 10rem;
  
  background-color: var(--color-white);
  font-family: system-ui, sans-serif;
}

.avatar {  
  anchor-name: --anchor-el;
  background-color: var(--color-dark);
  border: var(--border-size) solid var(--color-grey);
  border-radius: var(--border-radius-size);
  box-shadow: var(--border-size) var(--border-size) var(--border-size-max) var(--border-size) var(--color-grey);
  display: block;
  height: var(--avatar-size);
  position: relative;
  width: var(--avatar-size);
  
  
  & .avatar__wrapper {
    align-items: center;
    border: var(--border-size) solid transparent;
    border-radius: var(--border-radius-size);
    display: flex;
    height: var(--image-size);
    justify-content: center;
    overflow: hidden;
    width: var(--image-size);

    & .avatar__wrapper__image {
      height: var(--image-size);
      object-fit: scale-down;
      width: var(--image-size);
    }
  }
}

.avatar::after {
  border: var(--border-size) solid var(--color-grey);
  border-radius: var(--border-radius-size);
  content: '';
  height: var(--avatar-size);
  position: absolute;
  left: calc(-1 * var(--border-size));
  top: calc(-1 * var(--border-size));
  width: var(--avatar-size);
}

.avatar:hover .avatar__wrapper__image {
  animation: blur 250ms ease 125ms infinite, shake 250ms ease 125ms infinite;
}

.avatar:hover::after {
  animation: 250ms linear 125ms infinite alternate wave;
}

.avatar-notice {
  display: none;
  color: var(--color-white);
  background: var(--color-dark);
  border-radius: 0.75rem;
  bottom: anchor(bottom);
  font-weight: bold;
  left: anchor(right);
  line-height: 1.5;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  position-anchor: --anchor-el;
}

.avatar:hover + .avatar-notice {
  display: initial;
}

@keyframes blur {
  0% {
   ...

JavaScript

const audio = document.querySelector('audio');
const avatar = document.querySelector('.avatar');

avatar.addEventListener('mouseenter', () => {
	audio.play();
});

avatar.addEventListener('mouseout', () => {
	audio.pause();
	audio.currentTime = 0;
});