user profile image

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.


  1. Have you filed a bug on Edge? (Or at least ping'd them on Twitter.) It's pretty bad if it completely crashes the tab.

  2. @AmeliaBR - I had checked a couple days ago and there are a few bugs filed for "custom properties crash tab"... I still haven't had the time to step through this and try to pinpoint the error. I feel like I have better luck with responses for Edge bugs when I can be precise.

    I suspect it is something related to this bug in some way: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/ . I will at least add this pen in these comments and follow up there when I get more detail.

  3. Semi related... This is the bug that is tripping me up the most elsewhere https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11730857/

    But that one is not crashing the tab so it must be something more in this case

  4. This is wizardry, oh my goodness. Nice job!

  5. Thank you very much @aleciahh!

    @AmeliaBR turns out it was failing to load due to a clip-path (which should be skipped by Edge) that used a variable (for the accordion bellows). Moved that out to an @supports check for clip-path and now it loads... but does not render which I assume is due to that earlier mentioned bug.

    For anyone interested to follow the clip path bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11975071/

  6. This is super impressive! Very nice work!

  7. Lisi @lisilinhart on

    That blew my mind, nicely done :)

  8. May i use this in a website im making ? I have no problem with quoting your Github in the codes

  9. This is super impressive and very nice job. Would you like to the Best cat names here you will get the complete list of the names.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.