# I made snow! Based only on what I know.
**URL:** https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277
**Category:** programming
**Created:** [December 9, 2019, 5:01am UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277 "2019-12-09T05:01:50Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@kvapster](https://forum.kirupa.com/u/kvapster)
#### Post date: [December 9, 2019, 5:01am UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/1 "2019-12-09T05:01:50Z")
Hi!
I have not coded much in the last five-six months, so I decided to get back into it by making snow from piggy-backing off my last learning project. I was going to use bezier curves with CSS animation, but discovered that rotating random sized rectangles works well to create a nice effect. It starts out slowly, so it takes about 2 minutes.
[http://qcsaxmas.com/snowmaker.html](http://qcsaxmas.com/snowmaker.html)
Suggestions on improving the code are welcome!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 11, 2019, 9:44pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/2 "2019-12-11T21:44:42Z")
Really nice! Are you setting left/top to make the snow move? If so, you may benefit from making a minor change and using `translate3d` for added performance: [https://www.kirupa.com/html5/creating\_buttery\_smooth\_animations.htm](https://www.kirupa.com/html5/creating_buttery_smooth_animations.htm)
(Also, your title rhymes! haha)
🙂
---
### Author:  [@kvapster](https://forum.kirupa.com/u/kvapster)
#### Post date: [December 31, 2019, 4:04pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/3 "2019-12-31T16:04:55Z")
I did use left/top. I tried using translate but I ran into weird things.
[http://kvapster.com/sm2.html](http://kvapster.com/sm2.html)
I applied translate here and the results are excellent! But I had to use 2200% to cover the the distance of the screen.
100%{transform:translate(20%,2200%) rotate(360deg);opacity:0;}
It looks like the percentages only refer to the size of the object itself.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 31, 2019, 5:19pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/4 "2019-12-31T17:19:29Z")
For translate, you should use values like pixels or preferably **vw** (viewport width) and **vh** (viewport height). Percentages in this case are exactly as you describe, relative to the object size, so you should avoid them if possible.
🤖
---
### Author:  [@kvapster](https://forum.kirupa.com/u/kvapster)
#### Post date: [January 1, 2020, 6:24pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/5 "2020-01-01T18:24:44Z")
Ok, that works! Looks great on a PC. Not bad on my android phone, but it’s shifty. Hiding the x and y overflow doesn’t seem to have the same effect on the android Chrome browser. I am having trouble pinpointing exactly what is causing the shifting, but it may having something to do with the various sizes of the rotating objects containing the snowflakes.
---
### Author:  [@kvapster](https://forum.kirupa.com/u/kvapster)
#### Post date: [January 1, 2020, 6:36pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/6 "2020-01-01T18:36:24Z")
BTW, I did a cpu test on the difference between the fist snowmaker and the current one. The difference is phenomenal. The original would start out using between 35-40% of the cpu and inch upward to past 50%. (Terrible!) The last one hovers around 4-6% and inch up to 7 or 8%!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 1, 2020, 8:19pm UTC](https://forum.kirupa.com/t/i-made-snow-based-only-on-what-i-know/641277/7 "2020-01-01T20:19:45Z")
😀