CSS LED ART CHALLENGE!

So I saw a cool thing whilst doom-scrolling, and thought: Wouldn't it be fun to recreate all the real life surrounding light reflections and shadows that you don't get chance to play with in a UI component? It was originally going to be a loading spinner. But to create the LED nodules I gave them a hover state to work on the lit version, and then that became a thing.

This was my first CodePen 2.0 project - it took me about 5 mins to get used to the new UI (because we don't like change) but then I so much preferred it! Good job CodePen! I also learnt that if you lose anything then the omni search is amazing!

I always like to animate things on page load, to make CodePen's thumbnail more interesting. For this I stuck with the original concept of a loading spinner and after some trial and error found that a box-shadow matrix was best suited for this. Annoyingly though, the thumbnail didn't actually animate, so that was a slight waste of time :)

I'm not sure if the effects are too GPU intensive or if 2.0 thumbnails don't animate. But if you know, then please let me know.

It works by being a 9x9 grid, there are nine layers of shadow behind the black square grid and nine layers of light on the surface below the grid. I gave the LEDs attributes to reference their position, so the first row for example is:

 <u c="1" r="1"></u>
 <u c="2" r="1"></u>
 <u c="3" r="1"></u>
 <u c="4" r="1"></u>
 <u c="5" r="1"></u>
 <u c="6" r="1"></u>
 <u c="7" r="1"></u>
 <u c="8" r="1"></u>
 <u c="9" r="1"></u>

These could probably be class names, but that is so boring!

So if you hover over [c="1"] it makes the corresponding background shadow opacity 0.6 and similarly gives the surface light a slight opacity. Each layer of surface light has a conic-gradient that is aligned with the grid column of the corresponding hovered LED.

Also when you hover, the transition is removed. Then when you leave the element, an extremely long transition is applied. That way the LED slowly fades and the background shadows and lights stack up.

So why am I telling you all this?

That's a good question. I'm glad I asked...

Well as I was building it, I realised that there were so many directions I could take it, I found it quite hard to keep it tame and friendly for the browser. It felt a shame that so many pretty filters and colours could be applied, but I can't do them all. So I thought it would be a fun idea to open it up for everyone to take and hack and explore and have as much fun as I was having.

There is one filter: 'mix-blend-mode: saturation'. It is so god damn gorgeous, I've left a comment in the CSS where you might apply it.

Another fun thing I was tempted by was to cycle animate the LED colour.

But anyway, please fork it and hack it and do whatever you please. If you don't fancy messing with the code you can try and draw something fun in the matrix and take a screenshot. Send me your results or add the tag #ledart or #led-art to your CodePen, I will find them and the best will feature in my next YouTube video.

Good luck out there! Your time starts now! 🥳

Find me here @ivorjetski