css-dooodle.html

<css-doodle>
          :doodle {
            @grid: 15 / 100vmax;
        	  cursor: pointer;
            background: #6427a3;
            position: absolute;
            top: 0;
            left: 0;
            opacity:0.4;

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

        	:after {
            content: @pick(a,A);
            font-size: 6vmax;
            color: rgba(255,255,255,0.3);
            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>