: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)); } }