CSS 3D Wireframe Sphere

Remember the sphere from the intro animation? Well, it was actually rendered using CSS, and here you can play around with it! (read implementation below)

Try messing with the sliders below!

About

This sphere uses 3D CSS rendering. Each latitude and longitude line is actually a transparent div with a solid border, manually oriented and scaled in 3D space. Javascript is used to do all the math (mostly a bunch of trigonometry) for placing the latitude and longitude lines, and with a bit of Svelte's built in reactive updates, you can customize the number of lines in the sphere's frame by simply manipulating a handful of variables using the sliders.

Using the browser developer tools to inspect the sphere while changing the sliders can give you a pretty good idea of how it works. Try it out!

See how the individual div elements are positioned to create the latitude and longitude lines?

Thanks for checking out the sphere! Feel free to take a look at the source code on Github if you're curious. I can't promise it's the cleanest code, but it works, and that's what matters :D

Thanks,