Is it possible to change the sparkle shape into a circle for this sparkle trail cursor?

I’m still pretty new to coding and web development and am trying to recreate this effect but with a circle.

Original:

https://codepen.io/sarahwfox/pen/pNrYGb

So I changed the word sparkle – for example:

var sparkles=100;

to circle:

var circle=100

and that changed the shape but for some reason, it won’t fall like before? Is this the correct way to go about this? I did change it throughout the script but I can’t get it to fall like the other one.

https://codepen.io/kyannashanice/pen/YzQPoGe

I’ve not written much of my own javascript but would really like to incorporate this effect into my project. If someone would be able to help me or give me some resources that might help I would really appreciate it but realize that this may be a lot to ask.

Answer

I’m not clear what the circle effect you were hoping to see was but no, this isn’t at all the correct way, sorry!

All you really did by changing sparkles to circle the first time was effectively set the number of falling sparkles to zero, which is why they stopped falling.

There’s not much point changing variable names because they are really just labels. So for instance, if you changed every use of sparkles to circle you’re only really changing a label, not changing what the code does.

If you’re only just learning JavaScript it’s probably going to be beyond your capabilities trying to change the effect to something specific, but you could try playing with other values and seeing what happens.

Hope it helps! I think tinkering with other peoples scripts like this is a great way to start to understand coding.

UPDATE

The part of the code that animates the sparkles starts from line 140 – try tweaking some of that code.

For example on line 143, I changed it to stary[i]+=1+Math.random()*1; to make the sparkles drift down more slowly