Shadow Hover
No elemento inicial, vamos definir o shadow como a posição inicial e adicionar a transição para que o efeito possa ser aplicado no início e no final do hover.
svg {
--shadow-color: #91a7ff;
--shadow-size: 0;
aspect-ratio: 1;
outline-offset: 5px;
border-radius: 1e5px;
transition: box-shadow 0.5s cubic-bezier(0, 0, 0.1, 1);
filter: drop-shadow(0 0 var(--shadow-size) var(--shadow-color));
/* padding: 0.5rem; */ /* com drop-shadow */
/* box-shadow: 0 0 var(--shadow-size) #91a7ff; */ /* box-shadow não funciona com SVG */
}Agora, quando o elemento estiver em hover, vamos definir o shadow e o offset do outline.
svg:hover {
--shadow-size: 30px;
/* --shadow-size: 6rem; */ /* com drop-shadow */
}E no seletor :active vamos fixar um size menor
svg:active {
--shadow-size: 10px;
/* --shadow-size: 2rem; */ /* com drop-shadow */
}