Zdog UI

A real-time editor for creating simple 3D web illustrations using Zdog (a pseudo-3D JavaScript engine for canvas and SVG).

How to use

Go to Zdog UI web app (desktop only).

Use UI controls to add shapes, edit shape and canvas properties, and add animation.

Grab the code snippets (HTML and JavaScript) generated for your Zdog illustration!

Features

Canvas

dimensions
fallback text
background color

Zdog Illustration

Rotate (x, y, z)
Drag Rotate
Animate (continuous spin, ease in/out)

Zdog Shape classes

Box
Cone
Cylinder
Ellipse
Hemisphere
Polygon
Rectangle
Rounded Rectangle
Group

Zdog Shape properties

Fill
Faces (color and visibility)
Stroke
Translate (x, y, z)
Rotate (x, y, z)
Dimensions (width, height, depth, length, radius, diameter)
Sides

In progress

More Zdog API to support:

SVG Illustration
Anchor
Shape
Zoom
Scale
Centered
OnDrag

UI features

Copy/duplicate shape layers
Edit shape layer name
More customizable animation
Customizable onDrag