Zach his <snow-fall> Web Component

• https://www.zachleat.com/web/snow-fall/
• https://github.com/zachleat/snow-fall

Is asingle<snow-fall> Web Component creating 200 snow-ball DIVs falling down the screen.

Which made me wonder...

...

What if instead ofONE Web Component...

... each snowball would be aunique <snow-flake>?

... How many <snow-flake> Components can my CPU handle?

https://make-it-snow.github.io/

GitHub source code

<make-it-snow> Web Component

an experiment in more and more Web Components

• Every snowflake is a unique Web Component <snow-flake> with an SVG image.
• Snowflakes are animated with CSS to fall down rotating and drift sideways.
• Snowflakes are removed from the DOM when they reach the bottom of the screen (onanimationend).
• Instead of a fixed amount of snowflakesmore snowflakes are added every second.
• CSS animation FPS (Frames Per Second) is tracked.When FPS is above athresholdmore new snowflakes (Web Components) are added at the top of the screen (5 more every second). Below thetreshold less snowflakes are added.

FPS can be changed with UP and DOWN arrow keys (once a second, hold down CTRL for 10x).

On my slow? system I get anequilibrium at around400 total snowflakes on screen:

https://make-it-snow.github.io/

GitHub source code

Creating a unique SVG snowflake

Create one "spike" from 3 SVG paths with random width and opacity

<gid="spike">["M70 70v-60","M45 28l25 18l28-16","M50 11l20 20l20-20"].map((dpath)=>{letwidth=random(3,9);letopacity=random(0.2,1);return`<path opacity="${opacity}" stroke-width="${width}" d="${dpath}"/>`;})</g>

Rotate eachspike 4,6 or 8 times

Array(spikecount-1)// from random([4,6,8]).fill(360/spikecount)// calculate degrees offset for each spike.map((degrees,idx)=>{letspikerotation=(idx+1)*degrees;// all spikes make up a snowflake// every snowflake is in a shadowDOM, so its save to reference ID values!!return`<use href="#spike" transform="rotate(${spikerotation} 70 70)"/>`;})

That will create all unique SVG snowflakes:

https://make-it-snow.github.io/

GitHub source code

URL parameters and Attributes

The <make-it-snow> Web Component can be configured with URL parameters or Attributes. Also see index.html Page Source.

URL examples

• https://make-it-snow.github.io/?flakecount=400 (already too much for my system)

• https://make-it-snow.github.io/?maxflakes=100

• https://make-it-snow.github.io/?size=4&spikecount=4&color=gold&speed=2

• https://make-it-snow.github.io/?fps=60
  60 is the default Browser FPS

• https://make-it-snow.github.io/?fps=1
  Will this get us the most snowflakes? And terrible "animation"!

• https://make-it-snow.github.io/?counters=no&quotes=no Cleaner UI

• https://make-it-snow.github.io/index.html?fps=10&quotes=no&size=20 -
  Interesting, this make the H1 and H2 at higher z-index flicker

parameters

URL parameters only

<snow-flake> Attributes OR URL parameters

Seehttps://make-it-snow.github.io/index.html page source

https://make-it-snow.github.io/

GitHub source code

Observations

Feel free to add more in the comments

• 300<snow-flake> are 3 STYLE elements + 1 SVG in a shadowDOM
  That is 5 DOM elements for every <snow-flake>

• I did not do much animation optimization. Feel free to suggest low hanging fruit
  CSSwill-change:transform (or not) doesn't seem to have a notable effect

• Its all CSS animation, I wonder what a fullscreen SVG with SMIL animation would do (requires some refactoring)

• I now re-create a<snow-flake>; wonder what happens when every new snowflake will also become a totally new Web Component<snow-flake-[nr]>. Since we can not uncreate Web Components, will thecustomElementRegistry eventually cause a Stack Overflow error?