Double axis

An isometric perspective offers a new point of view and quite a different take on a graphic. And with SVG, you can approximate the effect thinking carefully about the way you draw. Instead of drawing a square as a series of vertical and horizontal segments, for instance, you can draw a polygon moving twice as horizontally as you do vertically.

<path d="M 0 0 0.5 0.25 1 0 0.5 -0.25" />

To build a cube, so to speak, you then stretch the figure further, proposing the same rhombus with a vertical offset.

<path d="M 0 0 0.5 0.25 1 0 0.5 -0.25" />
<path transform="translate(0 0.5)" d="M 0 0 0.5 0.25 1 0 0.5 -0.25" />

The illusion is complete as soon as you connect the two, 2D panels.

<path d="M 0 0 0.5 0.25 1 0 0.5 -0.25" />
<path transform="translate(0 0.5)" d="M 0 0 0.5 0.25 1 0 0.5 -0.25" />
<path d="M 0 0 0 0.5 1 0.5 1 0" />

Paying attention to the construction of a path element you can propose the figure with even more succinct syntax. And with enough munging, you can certainly take care to draw the faces of the cube separately, to entertain a few applications.

With Zdog, where you have the option of rotating the graphics on more than one axis and the possibility of drawing boxes, the effect is much easier to achieve.

Assume you draw a box in the very center of an illustration.

new Zdog.Box({
	addTo: illustration,
	width: 5,
	height: 5,
	depth: 5
});

To change the perspective you rotate the illustration, on the x axis to tilt the shape forward, and on the y axis to show the two sides.

illustration.rotate.x = degreesToRadians(-35.264);
illustration.rotate.y = degreesToRadians(-45);

For an actual isometric perspective you need to rotate the shapes by one specific number, 35.264 degrees, but at this point you are not limited to draw sides which are twice as long as they are tall. You can explore other projections.

illustration.rotate.x = degreesToRadians(-30);

If you want more than one cube, then, you don’t need to fiddle with multiple offsets, carefully positioning the shapes next to, and behind, previous copies. Just draw another box right to the side.

new Zdog.Box({
	addTo: illustration,
	width: 5,
	height: 5,
	depth: 5,
	translate: {
		x: 6
	}
});

As you rotate the entire illustration, the library takes care of crafting the 3D look — overall, a convenient setup.

What if you animated a shape to move left and right? With the shift in perspective, the movement gains a new level of depth, almost literally. It’s as if the shape were to leap on more than one axis. You just need to figure out which.