CSS Animations with Loops and Arrays + SVG file

So this was a fun project. I started with a plan, that I did not stick to, because curiosity won.

I was excited to use a previous project as a starting point - boy was that nice to have. Initially the project started out as pictured below.

The project was accomplished with plain Javascript and CSS. :)

---

Ok, so i've got a star class that i've looped through an array to output the row, its animated, and has sublayers of inside animations using clip-paths, and ::before and ::after. Thats cool. Now what? There is a lot of empty space. Can't have that...

So, I added some more star containers/divs with more loops and arrays:

---

Oh, thats way better. A lot more happening! But, there is only so much you can do with clip-path (or so it seems) and I wanted to add a glow effect and more complicated images. So then, we have SVG files. As an artist and fan of Illustrator, I happen to have an arsenal of my own SVG designs at my disposal. Sweet, let's do the thing.

---

Now we're cookin' with gas. Much better. but still, I want my glow border. Turns out if you use the mask-image property in CSS, your SVG file can have a drop-shadow property added to it. Nifty.

Here's the code I used to add a "blur"...

-webkit-filter: drop-shadow(5px 4px 15px rgb(155, 255, 112));
    filter: drop-shadow(5px 4px 5px rgb(155, 255, 112));

Got it working, and BAM! awesomeness. Pretty happy with this. Im excited to play more with SVGs and see where the universe takes me.

You are welcome to view the infinite loop here: https://annavi11arrea1.github.io/Project-Kaleidoscope/

Thanks for looking!