# How to code falling stars?
**URL:** https://forum.kirupa.com/t/how-to-code-falling-stars/646243
**Category:** programming
**Created:** [February 19, 2021, 4:25pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243 "2021-02-19T16:25:17Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 19, 2021, 4:25pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/1 "2021-02-19T16:25:17Z")
Hello,
I have found this webpage where the code for falling snow is. Is there anyone who can tell me how I can change it to stars instead of snow?
> **[The Falling Snow Effect](https://www.kirupa.com/html5/the_falling_snow_effect.htm)**
>
> Easily add some sweet falling snow to your page and learn all about how this effect works.
Thank you very much
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 20, 2021, 2:07am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/2 "2021-02-20T02:07:02Z")
I haven’t tried it out but the .snowflake is a circle because border-radius is set to 50%. Go to the clippy generator (clip-path) website pick a shape, copy the css and replace border radius in the .snowflake style with the clip-path code. If that doesn’t work, Ill have a better look at it.
Or alternatively use a css shape generator (it may be more performant).
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [February 20, 2021, 7:30am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/3 "2021-02-20T07:30:50Z")
Another option is to use a star image and put it inside the div 😀
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 20, 2021, 3:51pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/4 "2021-02-20T15:51:58Z")
Good idea, way more realistic than a basic shape, make sure u strip out the background of the star image. Theres loads of tutorials out there. Here’s a basic one using inkscape (open source).
> **[How To Remove A Background From An Image With Inkscape – Logos By Nick](https://logosbynick.com/inkscape-how-to-remove-background/)**
Good luck 🙂
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 20, 2021, 4:09pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/5 "2021-02-20T16:09:12Z")
Thank you very much @steve.mills, it works now 🤩 😀
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 20, 2021, 4:17pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/6 "2021-02-20T16:17:30Z")
No worries its Kirupa’s code that makes the animation work…🙂
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 20, 2021, 5:08pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/7 "2021-02-20T17:08:11Z")
True 😀@steve.mills, Do you how how I can make them into different colors? So, some of the stars is yellow and some are black. 😀
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 21, 2021, 3:43am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/8 "2021-02-21T03:43:06Z")
#snowflakeContainer:nth-child(even){background-color: pink}
#snowflakeContainer:nth-child(odd){background-color: purple},
And remove the background-color in snowflake.
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 11:03am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/9 "2021-02-21T11:03:20Z")
Thanks @steve.mills 😊, it is some years since I last coded css and javascript so I have some problems remembering how to code it correct:wink:. What I can see it should stand under ? but then there are no stars… Is it the right place to place it?
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 21, 2021, 12:36pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/10 "2021-02-21T12:36:15Z")
My Bad, the CSS doesn’t apply to the cloned nodes. This is a quick work around. Paste the below code at the end of
“function generateSnowflakes() {”
after the block of code with the comments:
“// create our Snowflake object”
(right at the end of the function but inside it)
// PASTE THIS IN BELOW
let flakes = document.querySelectorAll(‘.snowflake’);
for(i=0; i\< flakes.length; i++){
i%2 == 0 ? flakes[i].style.backgroundColor = ‘yellow’ :
flakes[i].style.backgroundColor = ‘white’;
}
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 1:14pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/11 "2021-02-21T13:14:51Z")
No problem, your help is really appreciated @steve.mills 😊. Have I placed it correct? because all the snow (stars) is gone
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 21, 2021, 1:37pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/12 "2021-02-21T13:37:24Z")
Yeah that’s right,
Try past this CSS in.(replace the current CSS)
body{
```
background-color: black;
}
#snowflakeContainer {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.snowflake {
position: fixed;
user-select: none;
z-index: 1000;
pointer-events: none;
width: 10px;
height: 10px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
```
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 3:00pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/13 "2021-02-21T15:00:01Z")
@steve.mills Hmm it is strange, it still doesnt work… Have I done it correct?😊
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 3:00pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/14 "2021-02-21T15:00:54Z")
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 3:02pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/15 "2021-02-21T15:02:22Z")
---
### Author:  [@Marik\_Gaming](https://forum.kirupa.com/u/Marik_Gaming)
#### Post date: [February 21, 2021, 7:03pm UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/16 "2021-02-21T19:03:27Z")
@steve.mills thanks for all of you help, I really appreciated it😊. I solved with this code
if (initialXPos \> browserWidth / 2) {
var color = “#FFFFFF”;
} else {
var color = “#816E6A”;
}
---
### Author:  [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [February 22, 2021, 3:35am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/17 "2021-02-22T03:35:45Z")
no dramas, good work
---
### Author:  [@bracknelson123](https://forum.kirupa.com/u/bracknelson123)
#### Post date: [March 26, 2021, 4:41am UTC](https://forum.kirupa.com/t/how-to-code-falling-stars/646243/20 "2021-03-26T04:41:02Z")
Check this video out, It will help you.
[ ](https://www.youtube.com/watch?v=Kf4BP-WLkVs)