Drag the illustration to view it from a different angle.

As usual, hit F12 or Ctrl-Shift-I to open the developer tools, and go to the Console tab.

Try changing the color or the stroke width of a shape: purpleCircle.stroke = 30

If you change the dimensions of a shape, you’ll have to call e.g. orangeSquare.updatePath() to make your changes visible. If you set width and height on the circle (to make it an ellipse), you can delete purpleCircle.width and height to get back to using the diameter.

Some of the properties are nested. For instance, you can move the square up or down by setting orangeSquare.translate.y to something other than 0.

You could also try adding new shapes: see the documentation.

Remove or re-add an existing shape with illo.removeChild(shape) or illo.addChild(shape).

The shapes were created with:

let purpleCircle = new Zdog.Ellipse({
	addTo: illo,
	diameter: 80,
	translate: { z: 40 },
	stroke: 20,  color: '#636',
});

let orangeSquare = new Zdog.Rect({
	addTo: illo,
	width: 80,  height: 80,
	translate: { z: -40 },
	stroke: 12,  color: '#E62',  fill: true,
});