snowfall garden social

Despite server side validation, there is no guarantee that all code is safe to run. No user submitted code is ran automatically, if you wish to run code click the "demo" button to run its corresponding code to the right. I tend to manually review a script a day or two after its posted and will obviously remove anything sus

ovthr

snowflake demo clone

id: 3535680361

source: (triple click to highlight all)

<section id="snowflakes3535680361"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes3535680361 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes3535680361 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes3535680361 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAY1JREFUWEftlcFKAlEUhv/TuAicUEF6h6JFZQW2auEqSJDW2iPUIgiCTFz0HukyKrBlha4KLMIWtZgXCCLUIYVaTCdGMmcs4V5tYhbXpZw55+P//3MuwUc/8hELFMwgN5QyShnZTVWZ+fPMmK+ZPIhmfzRmroUmCllZi+x6aZua7fQCmCpgjAPQfhlqgfAG4pVwsHgrAyUF0wH5oBvhAWO8KAMkB9PKtMAICsMQ2mG9oIvWC8PYGWFgt2tNLnuHvf05aFqvxXrqAsenCedsi4AD0QyJw7Q2Ssy81p2USp7j6CSBQKDXIhop4qWRdglBRGch/TApoo6CGfnOmH02PT40MDUdATm0vb56Rnx58v9sYgYsiwdGwIZzhtqbzHxtk2GY2s52FbX7Ohr19z4VgM2tGeTy893/vdkmu3vTcWfsbSqXn1ww9ma5tsmrO9OBcVxgwzARXyq5LLusrCIWi/YAvbzA30B+eJucnvji1Ra5pMPWCF/gYQfIfKdgRn4OZOQetlbZpGySzY6vMvMJLo6wJMwBxF0AAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:6.7s;"></div></span><span style="left:100vw;"><div style="animation-delay:17.4s;"></div></span><span style="left:90vw;"><div style="animation-delay:12.9s;"></div></span><span style="left:80vw;"><div style="animation-delay:14.6s;"></div></span><span style="left:70vw;"><div style="animation-delay:10.5s;"></div></span><span style="left:60vw;"><div style="animation-delay:1.9s;"></div></span><span style="left:50vw;"><div style="animation-delay:3.3s;"></div></span><span style="left:40vw;"><div style="animation-delay:13.9s;"></div></span><span style="left:30vw;"><div style="animation-delay:2.5s;"></div></span><span style="left:20vw;"><div style="animation-delay:12s;"></div></span><span style="left:10vw;"><div style="animation-delay:16.9s;"></div></span><span style="left:0vw;"><div style="animation-delay:11.2s;"></div></span><span style="left:-10vw;"><div style="animation-delay:18.7s;"></div></span></section>

solarcircuits

https://solarcircuits.neocities.org/ snowflake demo clone

id: 2080029885

good stuff

source: (triple click to highlight all)

<section id="snowflakes2080029885"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes2080029885 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes2080029885 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes2080029885 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAOhJREFUWEftl1ELwyAMhOPPFrqnDfzZHQ4ygqjcJS1zYJ81+bi7qE2y0Je8LKfIOdqbRFx16U0ziBaOhaJgGBAFY4D+E8ajCqsOrMwyMBEQRh1ImQ0zOsS2MlsZo8Cepsltjz0iIhOFXpaQTRV3w8xM86iDWlT7wjYpJAPEgLhg0PywIG6YmUoeCPPMwEZ7tOrI+fuX8CqFtt3WDW3W/Dxylmcpn7o/UcYG2cJEgELK1MZqU9SiUICvzIo7wHdAuGCutKQ3nVRmejBWqbYBmyMKRpu1AL2mHhVdMOgxyQLdCqOjj9q1FMwbLR9mJKLXvdAAAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:17.4s;"></div></span><span style="left:100vw;"><div style="animation-delay:18s;"></div></span><span style="left:90vw;"><div style="animation-delay:13.7s;"></div></span><span style="left:80vw;"><div style="animation-delay:7.2s;"></div></span><span style="left:70vw;"><div style="animation-delay:3.3s;"></div></span><span style="left:60vw;"><div style="animation-delay:2.2s;"></div></span><span style="left:50vw;"><div style="animation-delay:1.4s;"></div></span><span style="left:40vw;"><div style="animation-delay:7.2s;"></div></span><span style="left:30vw;"><div style="animation-delay:16s;"></div></span><span style="left:20vw;"><div style="animation-delay:1.9s;"></div></span><span style="left:10vw;"><div style="animation-delay:10.4s;"></div></span><span style="left:0vw;"><div style="animation-delay:3.3s;"></div></span><span style="left:-10vw;"><div style="animation-delay:1.8s;"></div></span></section>

fruit

snowflake demo clone

id: 115695953

awawaawawawawawawawawawawawawawawawawawawawawawawaw

source: (triple click to highlight all)

<section id="snowflakes115695953"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes115695953 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes115695953 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes115695953 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAg1JREFUWEfNmFFSxDAMQ5sfOBDc/wRwIPgp4868oqgKLUzZdn+2m8aOYstysm2Sz9vHPPPz5WmaWmtN39fzPM+zj5fd63M/N83D/v3z26vaNRwBpF7WM2D0OS1QY7h2kMyv7wJQvvXZ11x2roO+YNr1yEb9eETdD+uozRKFMiRcCuaoc7fxlDl4TzfrdJwgJTW5Qu4c0nToO48C6WDcOUJqSd3q1x2BGkDpve6MDSgnEvHxA5A0Z42MTzq68wJRZOc7RTVFLm16YTcpIbyghnQKNBERILrbPdu4rpYuRIOAujAlmXToL/OSzUbUdJJXkzsgJaonyrWjvjoCu/hQ6sobxFDLVkFUikYalfz4GuV3FT1dxFVZDZMeKYikOXubYr2NAqtAOQgFqb3LwVDmOp/IkhLlJetsOKNlmMo9OXVpH0VyT7s27QAw3q9q3BWTOegMINRHvXPt8XbRtYNUNSPlHTlyIJ7ukfB1jXLEETfW3avWaN85Mkc548SOhydVVDfAWVLl1HfcHvFMh7eumpK+jKJQ4x6JUyJzG844kMuraVQ5D9cZrSZXxUsU2M8ot+lNqYMnea+xf+naypmjZxDl02nnmVud9G51Bk7yfqTJ6d3ntNtB0pif7jYKnlsFYPx28Vvf97pReju4/K7tp7p0GfOQJ5tRn4OD6WbRHa5cbS//f8Y7NWeVR/9z9QVejKJwSC2OwgAAAABJRU5ErkJggg==); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:7.8s;"></div></span><span style="left:100vw;"><div style="animation-delay:7.8s;"></div></span><span style="left:90vw;"><div style="animation-delay:2.6s;"></div></span><span style="left:80vw;"><div style="animation-delay:10.9s;"></div></span><span style="left:70vw;"><div style="animation-delay:5.1s;"></div></span><span style="left:60vw;"><div style="animation-delay:15.5s;"></div></span><span style="left:50vw;"><div style="animation-delay:15.9s;"></div></span><span style="left:40vw;"><div style="animation-delay:14.3s;"></div></span><span style="left:30vw;"><div style="animation-delay:19.9s;"></div></span><span style="left:20vw;"><div style="animation-delay:1.8s;"></div></span><span style="left:10vw;"><div style="animation-delay:18.5s;"></div></span><span style="left:0vw;"><div style="animation-delay:12.7s;"></div></span><span style="left:-10vw;"><div style="animation-delay:12.7s;"></div></span></section>

rin

snowflake demo clone

id: 3430555229

this is so cool! thank you!

source: (triple click to highlight all)

<section id="snowflakes3430555229"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes3430555229 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes3430555229 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes3430555229 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAA70lEQVRYR+2WwQ6EIAxE5f8/elc2aUKIZWagrDWRiweVPl4HsRyJRknEcjwb5nOOarOcI9qqNGEFqRB2vQ2mN7IDiDbTF08FU1sUDUSZ8Yq+MLNmLPS269DnYKlNXm5aiBYAfaPCYVDBUc5CYRAI2oFhMAzIX2DYgIbBeIcja8SAlzMzWlEqGOXkRuBUgM3M6n8MOj5oGBQ+ZAiB/BaKJmnvMxNezce+J8OorWJBZDNKq1BYrwxKZhCMd0CyUZiCsVapvwgIiobpC6vZQSBTmUGtYop6z9Bm+i2exszK6kfvTpl5YXYZCA3wLshUmfkCSoLwJOM+joYAAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:6.7s;"></div></span><span style="left:100vw;"><div style="animation-delay:4.1s;"></div></span><span style="left:90vw;"><div style="animation-delay:4s;"></div></span><span style="left:80vw;"><div style="animation-delay:1.7s;"></div></span><span style="left:70vw;"><div style="animation-delay:3.6s;"></div></span><span style="left:60vw;"><div style="animation-delay:4s;"></div></span><span style="left:50vw;"><div style="animation-delay:9.5s;"></div></span><span style="left:40vw;"><div style="animation-delay:17.4s;"></div></span><span style="left:30vw;"><div style="animation-delay:19.1s;"></div></span><span style="left:20vw;"><div style="animation-delay:18.6s;"></div></span><span style="left:10vw;"><div style="animation-delay:18.5s;"></div></span><span style="left:0vw;"><div style="animation-delay:19s;"></div></span><span style="left:-10vw;"><div style="animation-delay:13.2s;"></div></span></section>

Arman

https://arman-m.neocities.org snowflake demo clone

id: 1688852542

My site has a spacey theme, so i made this little star for all my space themed bros to use 8D

source: (triple click to highlight all)

<section id="snowflakes1688852542"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes1688852542 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes1688852542 > span { position:fixed; top:-15px; height:calc(100vh + 15px); } #snowflakes1688852542 span div { width:15px; height:15px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAiUlEQVQoU61T2w2AIAykq4gr6hC6orgKWpMzJ9CSEPtJuUevIMGpY0t5XqNYV8yGAobBCozLFNJ+BkvdVB4GA4hZLXXRixyIWrVKSbge26WStwHtwcln5h5Jab8KzCJozf2fMqtyOAjRtZ3v4kAQHJPKXTivbGuj9aKwUu694N47ZhcgcD9Gb98XeJ9kUs4viM8AAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:11.4s;"></div></span><span style="left:100vw;"><div style="animation-delay:5s;"></div></span><span style="left:90vw;"><div style="animation-delay:0.7s;"></div></span><span style="left:80vw;"><div style="animation-delay:11.4s;"></div></span><span style="left:70vw;"><div style="animation-delay:15.4s;"></div></span><span style="left:60vw;"><div style="animation-delay:2.7s;"></div></span><span style="left:50vw;"><div style="animation-delay:8.2s;"></div></span><span style="left:40vw;"><div style="animation-delay:2.8s;"></div></span><span style="left:30vw;"><div style="animation-delay:19s;"></div></span><span style="left:20vw;"><div style="animation-delay:13.1s;"></div></span><span style="left:10vw;"><div style="animation-delay:8.1s;"></div></span><span style="left:0vw;"><div style="animation-delay:8.7s;"></div></span><span style="left:-10vw;"><div style="animation-delay:9.4s;"></div></span></section>

df

snowflake demo clone

id: 1871296627

source: (triple click to highlight all)

<section id="snowflakes1871296627"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes1871296627 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes1871296627 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes1871296627 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAB3UlEQVRYR+WY3VHDMBCE41aSFqANeIMCoCwoAN6gDWghacVkM7OazeZOsgOJPINeHOek06f7k+Rh1Whf26fxdvM6tPq15FP0NCeZoqQFAvkUPWfDQHkGEVnyz2AwqU5AEPynUPqe9a9ZcZJlHEYVvt1tx8fPzcBnNJnCV2Fa5m4pmgtTmy+0jAO4Arhg3Des8v1+t3r4WJcn/hv2LRrDQM4sXYWhST02btYvBxFA4CL2g5UAhva9ey4e8fGzYRiAukJCcPUeJ3yn1SKoWpqfWMZTkDAOAqUZDGQRkGeYl4ADjAI4jCqlRTRePDvoJsRNNJb9ozkLDP1IBVDmK+QEKsNvdY/LFMh1aqDDSidFKxrM1SgoALKagaD2RbmOKOvSohcpcwAtdlpvFFKzLQNk/wKT7R1QQFdgkK+a6cw0j6zHMXSTwuq8IUzkAlrBA5QQhNLAVZm7lBZLYXyAVlrIWG2j4C6mlsBnf5VF2wFT/ChmPBWzAPWJtd9vdBy5aTGWUd8tImaiE1qXbHIXdakzfmzsXoH1MNV1b1rcrp2VZ4LiebXzjAevnzUov/pJT61BiO5nYB62MriL3A4Wf2/ygFYreXzNvcTVNt+zrrdd79rZV4VslRf9CvEvPxb9AD6VTHkfSrkUAAAAAElFTkSuQmCC); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:7s;"></div></span><span style="left:100vw;"><div style="animation-delay:0.9s;"></div></span><span style="left:90vw;"><div style="animation-delay:13.5s;"></div></span><span style="left:80vw;"><div style="animation-delay:15.4s;"></div></span><span style="left:70vw;"><div style="animation-delay:13.2s;"></div></span><span style="left:60vw;"><div style="animation-delay:4.9s;"></div></span><span style="left:50vw;"><div style="animation-delay:3.3s;"></div></span><span style="left:40vw;"><div style="animation-delay:8.1s;"></div></span><span style="left:30vw;"><div style="animation-delay:7.1s;"></div></span><span style="left:20vw;"><div style="animation-delay:6.9s;"></div></span><span style="left:10vw;"><div style="animation-delay:13.8s;"></div></span><span style="left:0vw;"><div style="animation-delay:1s;"></div></span><span style="left:-10vw;"><div style="animation-delay:19.8s;"></div></span></section>

Lian

https://libre.town snowflake demo clone

id: 1135429782

Red drops

source: (triple click to highlight all)

<section id="snowflakes1135429782"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes1135429782 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes1135429782 > span { position:fixed; top:-5px; height:calc(100vh + 5px); } #snowflakes1135429782 span div { width:5px; height:5px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAO0lEQVQIW2NkAIIDMhr/QTQIODy5wcgIElD4/wcmxvCAkYWB8YG0ClwVSAZDECQAAowwM0FGgARBZgIATL8WD3qI3F8AAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:4.9s;"></div></span><span style="left:100vw;"><div style="animation-delay:3.8s;"></div></span><span style="left:90vw;"><div style="animation-delay:17.8s;"></div></span><span style="left:80vw;"><div style="animation-delay:10.3s;"></div></span><span style="left:70vw;"><div style="animation-delay:9.5s;"></div></span><span style="left:60vw;"><div style="animation-delay:14.4s;"></div></span><span style="left:50vw;"><div style="animation-delay:3.7s;"></div></span><span style="left:40vw;"><div style="animation-delay:16.3s;"></div></span><span style="left:30vw;"><div style="animation-delay:2.9s;"></div></span><span style="left:20vw;"><div style="animation-delay:9.1s;"></div></span><span style="left:10vw;"><div style="animation-delay:10.3s;"></div></span><span style="left:0vw;"><div style="animation-delay:7s;"></div></span><span style="left:-10vw;"><div style="animation-delay:20s;"></div></span></section>

Stella

snowflake demo clone

id: 1865061503

source: (triple click to highlight all)

<section id="snowflakes1865061503"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes1865061503 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes1865061503 > span { position:fixed; top:-35px; height:calc(100vh + 35px); } #snowflakes1865061503 span div { width:35px; height:35px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAABq0lEQVRYR9VYuxLCMAyjMxM/xMfzQ0zMhXDnnqpKdigHhC601A/ZseWk02HHNT+u6XGFavXc62Ix2KvQ5Jrz9huAEAy/e8VuCeZ2Oc3H83UjFwDCeYDjLAUYZwfBpmCagRB2gBAEZgudVHZCdgNGRZBFxZlRy9Jrs1ymZvwTYBToFRh2GutfgWmF7GoFg2EZtptmJnPAbf2KrOuwBUxvkbGhnppxdcTNMQWI6BZ+riLuBYN2nM9VZhBQ3COJKbJzrZ3pYa3gvawZFFCktiIqGgv8TmXONcSmm5oxJjhlUNG+y5wiQ16qpwwXlxLCecQzifVxXi3MCtmLVldBp/yQdQ6DUiDceFDd9SzwiLrXGA5IN7UdCeJyq2BWexKOhJUx7dXUznSRMNFnCsYpqf/dPibb3/C78TKD7OjWNZtFrL+7Ziq6x8qvCpApYFc3ocOf8sy7QPiU4EgR5RzxjTmb3CT96tQedj8T9aOOJWqeuAHqZFV94sAccw8cFY5ZCQ4a4nQQaa3AuH1Ljz4u3f+cKKvjS9b2VbGqIi+Pt8N8haja+evfZ+x+9QNfru4vs/3IMXQJCgAAAABJRU5ErkJggg==); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:15.1s;"></div></span><span style="left:100vw;"><div style="animation-delay:19.2s;"></div></span><span style="left:90vw;"><div style="animation-delay:11.6s;"></div></span><span style="left:80vw;"><div style="animation-delay:12.3s;"></div></span><span style="left:70vw;"><div style="animation-delay:17.5s;"></div></span><span style="left:60vw;"><div style="animation-delay:13.9s;"></div></span><span style="left:50vw;"><div style="animation-delay:13.5s;"></div></span><span style="left:40vw;"><div style="animation-delay:14.5s;"></div></span><span style="left:30vw;"><div style="animation-delay:11s;"></div></span><span style="left:20vw;"><div style="animation-delay:14.4s;"></div></span><span style="left:10vw;"><div style="animation-delay:3.6s;"></div></span><span style="left:0vw;"><div style="animation-delay:3.2s;"></div></span><span style="left:-10vw;"><div style="animation-delay:14.3s;"></div></span></section>

comrade

snowflake demo clone

id: 2559784886

source: (triple click to highlight all)

<section id="snowflakes2559784886"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes2559784886 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes2559784886 > span { position:fixed; top:-65px; height:calc(100vh + 65px); } #snowflakes2559784886 span div { width:65px; height:65px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAABv0lEQVR4Xu2YwRLCIAxE63d48eD/f5EHL36HDtOpwzBANpSkqa5XWwiP3SX0svC3XMhgIYQkAiqBENYwoBIIgUr4Hoy0A+1AO9AOeafMTGAmMBNiZcLzen+Xt9nb6+FmVbeJpCv7kSDCQEiQjgIRCsKmFm8YISHUVGGZEWEheIIIDaEEYaUGQjhDx5iH5N8qwcMS4e3wFxDKnqAmeeQZqSPt/X+oEjRNkWU2uEOoLXzbpV7w/QyEUQDWueCmhD0AyjvF7KPSBUIPQFoguqhtHPR5NCzNIUgACCHbKml3Tx+MraNQc/6fHkLPmwgISwCpNvNMQMJJWqT0PzJH2I4xL6ylCEQpPwOh9aHV41P8sB2sJDqjqdIqYwiC5uKjLainCOkYHZlrKBil5mdPodLYmsZKA0SlhJoFpMIlKNL7oTKhlwHahaC7lACGOR2QQmaDyBVkdXHaNkO0AwKgvOqiO117TrLPnrFb76ogaArUKkMz9mwQXQizeoEWkCMXnoOEIEQpdrYC4EywmjjSuGImRCrWqhZCiPI9wWqH0XGpBCph1QqVQAhUwjc3aQfagXagHeBbJNpxnf05BiODcdXwB8CT7EIqMykaAAAAAElFTkSuQmCC); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:6.7s;"></div></span><span style="left:100vw;"><div style="animation-delay:6.3s;"></div></span><span style="left:90vw;"><div style="animation-delay:13.4s;"></div></span><span style="left:80vw;"><div style="animation-delay:8s;"></div></span><span style="left:70vw;"><div style="animation-delay:18.8s;"></div></span><span style="left:60vw;"><div style="animation-delay:10.7s;"></div></span><span style="left:50vw;"><div style="animation-delay:15s;"></div></span><span style="left:40vw;"><div style="animation-delay:2.3s;"></div></span><span style="left:30vw;"><div style="animation-delay:10.3s;"></div></span><span style="left:20vw;"><div style="animation-delay:8.5s;"></div></span><span style="left:10vw;"><div style="animation-delay:4.2s;"></div></span><span style="left:0vw;"><div style="animation-delay:6.1s;"></div></span><span style="left:-10vw;"><div style="animation-delay:15.2s;"></div></span></section>

Frugal Gamer

https://thefrugalgamer.net snowflake demo clone

id: 3369645720

I tried to make the classic paper-cut type snowflake. Love this tool!

source: (triple click to highlight all)

<section id="snowflakes3369645720"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes3369645720 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes3369645720 > span { position:fixed; top:-65px; height:calc(100vh + 65px); } #snowflakes3369645720 span div { width:65px; height:65px; position:relative; background-image:url(data:image/png;base64,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); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:10s;"></div></span><span style="left:100vw;"><div style="animation-delay:9.3s;"></div></span><span style="left:90vw;"><div style="animation-delay:15.8s;"></div></span><span style="left:80vw;"><div style="animation-delay:1.4s;"></div></span><span style="left:70vw;"><div style="animation-delay:16.2s;"></div></span><span style="left:60vw;"><div style="animation-delay:0.7s;"></div></span><span style="left:50vw;"><div style="animation-delay:16.1s;"></div></span><span style="left:40vw;"><div style="animation-delay:14.9s;"></div></span><span style="left:30vw;"><div style="animation-delay:16.5s;"></div></span><span style="left:20vw;"><div style="animation-delay:13.9s;"></div></span><span style="left:10vw;"><div style="animation-delay:19.6s;"></div></span><span style="left:0vw;"><div style="animation-delay:11.2s;"></div></span><span style="left:-10vw;"><div style="animation-delay:3.2s;"></div></span></section>

Nico

snowflake demo clone

id: 1668273258

This is very cool!

source: (triple click to highlight all)

<section id="snowflakes1668273258"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes1668273258 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes1668273258 > span { position:fixed; top:-65px; height:calc(100vh + 65px); } #snowflakes1668273258 span div { width:65px; height:65px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAFjUlEQVR4Xu1bi5LbMAhM/qx/1vTP+mdXSxG6FQIWycn1pvXNdKbxA8GyLFhx7jfn7+P4K6fux593zSuOl3W+Yo0oljDAdwIhthHId4CRiYFmuRtR3u6yAIMvQQsT9PFd+7fG4HJ/pXKCzRSEYnQwBouUWll1VmcGyyGTNXc95deQPOInD6IYbxkbUMVF24kMIFoD2OfQpuPDAGbzP7ITgyCLNCTdTGlnAlBY0KFQJtaZfFQxWGBwEBSVUpQNWDIE2YxVJwDoQSAXGBcmKSiJZRCq4DTHUmqugij6gouyz6JsrNRCn0hJbIEgQKRAQO9Z5o3zLHg5T8toiwmklpbYAJGc0gQHEeoLiaX36cl+QlXp4sqodb0FSqa3IwNS1zvx1PV3xWTVCW8di8ZZcLPXVV8NEPr9ptAR+mjWRM7IOS9bXi1n7ksxALKFIos+d2EcnEmUQgYIqtglQdgtDPHySmgJAATCaMUDCN3wBgiaURXUZtDUm3augx+xryEhzxpbAEBJaGCHFskomGlXgw28QbKsgp0YiMDJtY0xYm65NbcbvfjMOWFJcCDQUGQtQJ56Ne4nQOBYw6tCnCnXDupw8SbylEEO1cP7gvKg6xmJqQRzEvF5nDjqUZCyhtkFqk9rRDrRWBTpA2VmK9E7bkJ4+wOesV0ARESnZwhrtN0EIu1bZUhZJLE5gkap+IkSe91BtABpW5zx/LCACEqXAoBlUTSpM2EBCJOCWtAcADwAZffKpXfC/opWVByazScjN9ig1ReNRswyuwEkYDpvyLzVNba6R4v7EwRC3d5OViirAjBpqhKQonJSJyLRxAoYu0NybJ1YQJwSIXTL6MzuVVDGIaAAftgiuxGMWi96BoCgFE8xwhBNc8uut0illLizPGUOxakYSNIyHHOJHlEw0AftX4ttEky15jg2w9XUcRAJSyRTLDLV9dPzLnbtP7SFBro2lKS6zn6KjJyD1rI0XLEWR84vMYL4r21VEOgC0H+6/UBEs6q8KrB0DnDKIWSq0Iv25t3s69UNDXncHh/HP/oMo6Qr/sY8IdaS/IJB32OMGFTBcgRsyA6pSb3G4zB6u/06Dv+8PY7aYlXYz+Oix0FTK5q/6lJzieduc7A6jrPeZSnvVfkUBhR7jx/Hv99PywMjkH1v9K9u76WQ+teZgLUR0vFVM4EqmW+hCQJCqOiCDlFfqt5MYJNAu76e6Q5LQLBAjvNmy/3uc4Kluv/lxFiBMNqK+eAhdZ2kLwV090lQs/L0s4MRUGr+Twwm4URK5g8KoBLansxGb/PlLeXztZ9Q5oQBOYeWp1VfstIyMJWY2l6jnSpZhqEdsHHtMfZnAquujMkpZARrgYoNdUlY4+/uNjvCpDFAcZsemuRiLKcEZVNfvnhzCYCuAQyF2Ajs+gZqYKSTOYYqO+/tQ2L7dd9BTrApEj/XN7dFIu3K3AS0CXs1jMmuQwRg874AgFS3IhqEW4PX+wlKoPGF9u0fe1DRVBku13em6ewH4mc0L3rIY9D1zhIyYcpI8FBjQW6JUCiaLcvf5u21yVmiytEM4Z3zRHMAH4cnKAVLmGlXMhyph1py8f7rjdaCi5eJzDsLq9nwSgYz/QqbpkIWZjlfGPm75ScHFU+qNejsM5V8mFPod5WOzl2/d9BzwoR6QKFoXB3sgMDVoVQtyj6jmEWsoJ0o6HbLTEjVrAoca1G34g4CqLa7rwnqnm3T9TonmWKDg+C0lSjbUfaYBrhCLcHo6FWGd9o9/xqxoega73DmvlA9BYLX+5UPg6+EBTXHVH3F4nPOSO0/rNQugpIqtaDt9FPwbbv7cwOwQ0HojuHiiyM13gqYVlAFBH2cJicBxkt+K30qMyQKDBrYTJOyCk4mBnfRzM2rDnmKzjZtzq7DYvkDeVIvffj1YGIAAAAASUVORK5CYII=); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:12.7s;"></div></span><span style="left:100vw;"><div style="animation-delay:0.7s;"></div></span><span style="left:90vw;"><div style="animation-delay:10s;"></div></span><span style="left:80vw;"><div style="animation-delay:19.6s;"></div></span><span style="left:70vw;"><div style="animation-delay:10s;"></div></span><span style="left:60vw;"><div style="animation-delay:2.9s;"></div></span><span style="left:50vw;"><div style="animation-delay:8.4s;"></div></span><span style="left:40vw;"><div style="animation-delay:10.7s;"></div></span><span style="left:30vw;"><div style="animation-delay:17s;"></div></span><span style="left:20vw;"><div style="animation-delay:12.6s;"></div></span><span style="left:10vw;"><div style="animation-delay:15.2s;"></div></span><span style="left:0vw;"><div style="animation-delay:3.5s;"></div></span><span style="left:-10vw;"><div style="animation-delay:16s;"></div></span></section>

sacha

https://snowfallgarden.lophius.xyz snowflake demo clone

id: 3038001491

the first ever snowflake

source: (triple click to highlight all)

<section id="snowflakes3038001491"><!--snowflakes(v1) generated with: https://snowfallgarden.lophius.xyz--><style>#snowflakes3038001491 { overflow:hidden; pointer-events:none; image-rendering:pixelated; } #snowflakes3038001491 > span { position:fixed; top:-16px; height:calc(100vh + 16px); } #snowflakes3038001491 span div { width:16px; height:16px; position:relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVQ4T61TQQ7AIAib/3/0JkRMxyqQMC5GoQWKjIvYPU2exzQ5/R0hGhCRmM/IfOyLIMvMKtkE5oxKZzGUwEgwI4IxyRAH9ucDPz0vYU1cJUBGVD0DK64COFUllfcJ2i20RTSh2JhKY2QEpx0IPxJbmuxr7zH+tky+nco6P9NhoAE7XQvlAAAAAElFTkSuQmCC); animation: sine 15s linear 0s infinite normal;} @keyframes sine { 0%{left:-110px; top:0%;} 1%{left:-101px; top:1%;} 2%{left:-91px; top:2%;} 3%{left:-81px; top:3%;} 4%{left:-72px; top:4%;} 5%{left:-63px; top:5%;} 6%{left:-54px; top:6%;} 7%{left:-46px; top:7%;} 8%{left:-39px; top:8%;} 9%{left:-32px; top:9%;} 10%{left:-26px; top:10%;} 11%{left:-21px; top:11%;} 12%{left:-17px; top:12%;} 13%{left:-14px; top:13%;} 14%{left:-12px; top:14%;} 15%{left:-11px; top:15%;} 16%{left:-11px; top:16%;} 17%{left:-11px; top:17%;} 18%{left:-13px; top:18%;} 19%{left:-16px; top:19%;} 20%{left:-20px; top:20%;} 21%{left:-24px; top:21%;} 22%{left:-30px; top:22%;} 23%{left:-36px; top:23%;} 24%{left:-43px; top:24%;} 25%{left:-51px; top:25%;} 26%{left:-59px; top:26%;} 27%{left:-68px; top:27%;} 28%{left:-77px; top:28%;} 29%{left:-87px; top:29%;} 30%{left:-96px; top:30%;} 31%{left:-106px; top:31%;} 32%{left:-116px; top:32%;} 33%{left:-126px; top:33%;} 34%{left:-136px; top:34%;} 35%{left:-146px; top:35%;} 36%{left:-155px; top:36%;} 37%{left:-163px; top:37%;} 38%{left:-172px; top:38%;} 39%{left:-179px; top:39%;} 40%{left:-186px; top:40%;} 41%{left:-192px; top:41%;} 42%{left:-198px; top:42%;} 43%{left:-202px; top:43%;} 44%{left:-206px; top:44%;} 45%{left:-208px; top:45%;} 46%{left:-210px; top:46%;} 47%{left:-210px; top:47%;} 48%{left:-210px; top:48%;} 49%{left:-209px; top:49%;} 50%{left:-206px; top:50%;} 51%{left:-203px; top:51%;} 52%{left:-199px; top:52%;} 53%{left:-194px; top:53%;} 54%{left:-188px; top:54%;} 55%{left:-181px; top:55%;} 56%{left:-174px; top:56%;} 57%{left:-166px; top:57%;} 58%{left:-157px; top:58%;} 59%{left:-148px; top:59%;} 60%{left:-138px; top:60%;} 61%{left:-129px; top:61%;} 62%{left:-119px; top:62%;} 63%{left:-109px; top:63%;} 64%{left:-99px; top:64%;} 65%{left:-89px; top:65%;} 66%{left:-79px; top:66%;} 67%{left:-70px; top:67%;} 68%{left:-61px; top:68%;} 69%{left:-53px; top:69%;} 70%{left:-45px; top:70%;} 71%{left:-38px; top:71%;} 72%{left:-31px; top:72%;} 73%{left:-25px; top:73%;} 74%{left:-21px; top:74%;} 75%{left:-17px; top:75%;} 76%{left:-14px; top:76%;} 77%{left:-12px; top:77%;} 78%{left:-11px; top:78%;} 79%{left:-11px; top:79%;} 80%{left:-12px; top:80%;} 81%{left:-14px; top:81%;} 82%{left:-16px; top:82%;} 83%{left:-20px; top:83%;} 84%{left:-25px; top:84%;} 85%{left:-31px; top:85%;} 86%{left:-37px; top:86%;} 87%{left:-44px; top:87%;} 88%{left:-52px; top:88%;} 89%{left:-60px; top:89%;} 90%{left:-69px; top:90%;} 91%{left:-79px; top:91%;} 92%{left:-88px; top:92%;} 93%{left:-98px; top:93%;} 94%{left:-108px; top:94%;} 95%{left:-118px; top:95%;} 96%{left:-128px; top:96%;} 97%{left:-138px; top:97%;} 98%{left:-147px; top:98%;} 99%{left:-156px; top:99%;} 100%{left:-165px; top:100%;} }</style><span style="left:110vw;"><div style="animation-delay:3.8s;"></div></span><span style="left:100vw;"><div style="animation-delay:2.8s;"></div></span><span style="left:90vw;"><div style="animation-delay:10.4s;"></div></span><span style="left:80vw;"><div style="animation-delay:2.7s;"></div></span><span style="left:70vw;"><div style="animation-delay:15.9s;"></div></span><span style="left:60vw;"><div style="animation-delay:8.7s;"></div></span><span style="left:50vw;"><div style="animation-delay:6.6s;"></div></span><span style="left:40vw;"><div style="animation-delay:7s;"></div></span><span style="left:30vw;"><div style="animation-delay:12.8s;"></div></span><span style="left:20vw;"><div style="animation-delay:13.1s;"></div></span><span style="left:10vw;"><div style="animation-delay:5.1s;"></div></span><span style="left:0vw;"><div style="animation-delay:18.5s;"></div></span><span style="left:-10vw;"><div style="animation-delay:11.8s;"></div></span></section>

Copyright GNU AGPL - source