5⃣ Pure CSS icosahedron candy https://codepen.io/thebabydino/pen/xxwveWZ

Fair warning: it now looks broken in Chrome until bringing up DevTools or resizing the result panel or switching to another CodePen editor layout. Should have found time to file a bug... Still love it.

#3d #geometry #maths #solid #3Dgeometry #mathematics #code #coding #CSS #noJS #cssVariables #frontend #web #dev #webDevelopment #webDev

4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb

Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!

#CSS #3D #pureCSS #css3d #transform #sphere #maths #geometry #3dGeometry #noJS #shading #code #coding #frontend #web #webDev #dev #webDevelopment

3⃣ Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron https://codepen.io/thebabydino/pen/gOjGyby

Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact https://css-tricks.com/logical-operations-with-css-variables/

#CSS #3D #pureCSS #noJS #booleanLogic #cssVariables #transform #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #polyhedra #maths #geometry #3dGeometry #mathematics #platonicSolids #Archimedean