Counting shapes

Believe it or not, but this week’s Zdog graphic started out with the pixelated sprite for a promising mascot.

But just how can you paint a 2D picture in pseudo-3D? Well, in increments. And don’t worry, you won’t have to count too many copies before finding a satisfying answer.

How can you draw the sprite with SVG? I explored a few options in a past article, and ultimately found a solution with <path> elements. Paths with a stroke and a series of horizontal rules, marking the figure pixel by neighboring pixel. This is exactly how the first copy of the mascot is rendered.

But what is a pixel if not a square? You need the coordinates, the dimensions for each adjacent segment, but once you wrangle the string for the d attribute and obtain the values, you find a second way to paint a pretty picture. With <rect> elements instead.

And you might already see the way forward. Why stop with a 2D square where you can have a pseudo-3D box? Since you went through the hassle of finding the values for the rectangles, you already have the coordinates and the dimensions. What you then need is to add depth.

The result? Seemingly, the same exact mascot, only with the markup produced by Zdog. The benefit? With the library, it takes very little to explore the axes, and entertain different perspectives.