<div class="notifications">💩</div>
<button class="btn--reset">Restart fake 💩 notifications</button>
<p>Try hovering over the little fella.</p>

html {
  --notification-count: 1;
  --transition-time: 0.75s;
  --notification-bubble-size: 10px;

  font-family: verdana;
}

.notifications {
  width: 20px;
  height: 20px;
  line-height: 20px;

  &::before {
    // Poop Hat
    position: absolute;
    top: 7px;
    left: 10px;
    width: 12px;
    font-size: 4px;
    line-height: 4px;
    border-bottom: 2px solid #000;
    text-align: center;
    content: "█";
    transition: all var(--transition-time);
  }

  &:hover::before {
    left: 9px;
    transform: rotate(-40deg) translateX(-1px);
    transition: all var(--transition-time);
  }

  &::after {
    transition: all var(--transition-time);
    position: absolute;
    top: 19px;
    left: 23px;
    max-height: var(--notification-bubble-size);
    min-width: var(--notification-bubble-size);
    max-width: var(--notification-bubble-size);
    overflow: hidden;
    line-height: var(--notification-bubble-size);
    text-align: center;
    background-color: darkcyan;
    color: #fff;
    padding: 2px;
    border-radius: 50%;
    font-size: 6px;
    content: var(--notification-count);
  }

  &:hover::after {
    transition: all var(--transition-time);
    transform: scale(2.4);
  }
}
.btn--reset {
  font-size: 1em;
  margin-top: 20px;
}

const notificationPingDuration = 850;
const notificationCssVar = "notification-count";
const resetButton = document.querySelector(".btn--reset");
const timeoutIds = [];

function setCssVar(varName, value) {
  document.documentElement.style.setProperty(`--${varName}`, `'${value}'`);
}

// Simulating notifications received.
function notify(count) {
  if (count === 100) {
    setCssVar(notificationCssVar, "∞");
    return;
  }

  setCssVar(notificationCssVar, count);

  timeoutIds.push(
    setTimeout(() => {
      notify(count + 1);
    }, notificationPingDuration)
  );
}

resetButton.addEventListener("click", () => {
  timeoutIds.forEach(timeoutId => {
    clearTimeout(timeoutId);
  });
  timeoutIds.length = 0;
  notify(1);
});

// Kickstart the 💩 notifications!
notify(1);