Powerful mix

What lies behind an interesting pseudo-3D graphic? Even after twenty installments, it is challenging to come up with something impressive on a weekly basis, so I’ve yet to crack the formula.

Frequently, the illustration is the natural evolution of what I draw with SVG, something that would be impossible, or at least practical, to conjure up line after line.

There are instances, however, where the illustration is the result of multiple ingredients, coalescing together into something mildly intriguing.

You have the contribution of HTML in the form of a button, to galvanize the starting, tranquil animation. CSS pitches in with semi-transparent colors, to have some of the shapes partly see-through. JavaScript brings everything together, setting up the scene and managing the interaction. And you can’t forget SVG. “Where? All I see is a canvas element on screen”. In more than one place, actually. As a precursor of the final graphic — of course I drew a 2D version to back up the Zdog classes —, and as an essential component for the more drastic changes — but I will keep this last recipe secret.

For the time being, you’ll have to trust that there is a path, bubbling up to the surface to complete the mixture as you press the button. However many times you may want to stir things up.