:doodle {
@grid:15 / 100%;
width:100vw;
height:100vh;
}
/*snowing cats and dogs*/
:after {
content:@p(🐶,🐶,🐶,🐩,🐩,🐩,🐺,🐺,🐱,😸 ,😹,😻,😾,😿,🙀,🦁,🐆,🐅,🐈);
}
/*and some barnyard friends*/
@random(.13) {
:after {
content:@p(🐀,🐁,🐂,🐃,🐄,🐅,🐆,🐇,🐈,🐉,🐊,🐋,🐌,🐍,🐎,🐏,🐐,🐑,🐒,🐓,🐔,🐕,🐖,🐗,🐘,🐙,🐚,🐛,🐜,🐝,🐞,🐟,🐠,🐡,🐢,🐣,🐤,🐥,🐦,🐧,🐨,🐩,🐪,🐫,🐬,🐭,🐮,🐯,🐰,🐲,🐳,🐴,🐵,🐶,🐷,🐸,🐹,🐺,🐻,🐼,🐽,🕷,🙈,🙉,🙊,🦀,🦁,🦂,🦃,🦄,🦅,🦆,🦇,🦈,🦉,🦊,🦋,🦌,🦍,🦎,🦏,🦐,🦑,🦒,🦓,🦔,🦕,🦖,🦗,🦘,🦙,🦚,🦛,🦜,🦝,🦞,🦟,🦠,🦡,🦢);
}
}
font-size:@p(3vmin, 4vmin, 1.75em);
text-shadow:2px 2px white;
animation: snow @r(8s, 25s) infinite linear;
@random(.3) { animation: snow @r(15s, 30s) infinite linear;
font-size:@p(2vmin, 3vmin, 1.5em);
}
@random(.05) { animation: snow @r(7s, 17s) infinite linear;
font-size:@p(1em,1vmin);
}
will-change:transform;
@keyframes snow {
0% {
transform: translateY(-200vh) translateX(@r(-10px, 10px));
}
100% {
transform:translateY(100vh) translateX(calc(.1*@index()*@p(-2vmin,2vmin))) rotate(@r(-720deg, 720deg));
}
}