:doodle { @grid:15 / 100%; width:100vw; height:100vh; } :container { transform-style:flat; } /*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(12s,30s) infinite linear; font-size:@p(1em,1vmin,2vmin,3vmin,1.5em); will-change:transform; @keyframes snow { 0% { transform: perspective(@r(300px)) translateZ(@r(-500px,-200px)) translateY(-400vh) translateX(@r(-20px, 20px)); } 100% { transform:translateY(100vh) translateX(calc(.12*@index()*@p(-2vmin,2vmin))) rotate(@r(-720deg, 720deg)); } }