<css-doodle>
  :doodle { 
    @grid: 15 / 100vmax;
    background: #fff;
    cursor: pointer;

  }
  :doodle(:hover) { --s: 1 ; }

  :after {
    content: @pick(a,A);
    font-size: 4vmax;
    color: #000;
    transform: scale(@rand(.2, .9));

  }
  
  transition: .5s cubic-bezier(.175, .885, .32, 1.275);
  transition-delay: @rand(650ms);
  transform: translateY(calc(var(--s) * 100%)) rotate(calc(var(--s) * 360deg));

  

</css-doodle>

body {
  font: 900 100px/0.65 system-ui;
  margin: 0;
  overflow: hidden;
  width: 110%;
}
span {
  display: inline-block;
  text-indent: -2rem;
  position: relative;
}