oriane212 / zdog-ui

Web app for creating animated illustrations with 3D JavaScript engine Zdog

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