See the Code - See it Full Page - See Details
Single Div Art - Wanted to see how Custom Properties (CSS Variables) can help with organization and animation. A Squeezebox seemed appropriate. I am in awe of people who do single div art regularly. Especially now that I know how long this took me. And as always seems to be the case, I am now on the other side of working on this with a fuller understanding of `background-size` and `background-position` especially in relation to relative gradients. In addition to `requestAnimationFrame` and CSS Variables. Works well in everything that supports Custom Properties, except I cannot get it to render in Edge. Fixed a crashing bug in Edge by changing how the `clip-path` is used (and reporting a bug), but there are other issues as discussed in the comments here. If you are viewing this in Chrome or Opera the JS is only used to add a class to the `document` that tells it Custom Properties in Keyframes are supported... otherwise it performs the fallback that involves requestAnimationFrame to change the Custom Properties' values which will add full animation support for Safari and Firefox.
This Pen uses: HTML, CSS, JavaScript, and