Starter code and resources are taken from CSS Tricks - Creating Generative Patterns with the CSS Paint API.
Using the CSS Paint API to create generative patterns for make "twinkling" lights on a Christmas tree!
The light locations are randomly seeded every time the page is loaded, and the page is set to reload every second (to give the "twinkle" effect). The seed locations are by randomized X and Y locations on the browser.
The light shapes are all set as circles, whose sizes are all predetermined. However, the circle radii can also be set to be randomized every time as well, creating lights of different sizes.
Lastly, the colors of the lights are all preset, but the colors are randomly assigned to each light seed location, so the colors will appear to be changing over and over (or rather, ✨ twinkling ✨)
Also please note that currently, paint worklets (as used here for the Christmas lights) are only compatible with Chrome and Edge browsers for Desktop, and Android Chrome and Android for Mobile / Tablet.
The tree shapes (including the tree body, the tree trunk, and the tree star topper) are all generated using a clip-path generator. I used Clippy (which is linked below in the Resources section). I'm not at a place where I know the math behind making clip paths for myself, so I used a generator to create the shapes I wanted, which also output the CSS code to use!