Or as an SVG file. I have an interesting experiment that puts a sprites sheet, CSS and even some scripting in the favicon file. Since every browser wants some type of favicon anyway, why not overload it with fun stuff?

Sure the JavaScript won't load in CSS or favicon mode, but it can be loaded into the Dom as well as exist in the CSS.

In my SVG file I have lots of CSS variables generated by the JavaScript, then saved as a big list in the SVG, enabling light/dark mode things. SMIL animation too.

This experiment is based on what you described, an all in one HTML file.

In that experiment the CSS was getting clumsy due to the amount of SVG I had in there, so I put the CSS in the SVG for fun.

As for why, I am creating a modern version of an Embroidery sampler. These existed from centuries ago and served as a portfolio of sorts plus a reference on different stitches, such as how to do the alphabet.

So my SVG sampler has examples of how to do tricky things in SVG, with all of it human drawable and readable, so no massive paths, just simple primitives, clipped, masked, transformed and cloned to create all my icons, logos and clipart.

I hope to make SVG samplers a thing, so one SVG file and one HTML file to illustrate how it all works.

To be honest it has been an excellent learning experience and I can now do so many things with just the MDN reference for SVG as my guide.