<css-doodle class="my-doodle">
  :doodle { 
    @grid: 25 / 100vmax; 
    background: #12152f; 
  } 
  :after { 
    font-family: devicons; 
    content: '\@hex(@rand(58894, 59050))';
    font-size: 3.6vmax; 
    color: hsla( @rand(360), 70%, 70%,@rand(.9) ); 
  }
   @keyframes turn { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
  } 
  :hover { 
    animation: turn .9s ease-out infinite; } 
</css-doodle>

const myDoodle = document.querySelector('.my-doodle');

myDoodle.addEventListener('click', () => {
  myDoodle.update();
});