zzz.dog No paid content found

What is Zdog?

Zdog is a JavaScript pseudo-3D engine for drawing simple 3D models on the web, rendering to either Canvas or SVG. Its geometry lives in 3D space, but everything is drawn as flat, round shapes — so you get a stylized, illustration-like look rather than photorealistic rendering.

What that means in practice

• Pseudo-3D, not full 3D. Shapes are positioned in 3D and rotate in 3D, but they render as flat forms. There is no lighting, texture mapping or polygon shading pipeline — the aesthetic is closer to vector illustration than to a game engine.
• Round by design. Circular shapes render as true circles with rounded edges rather than faceted polygons, which is why the output looks smooth and "designer-friendly" instead of jaggy.
• Small. The whole library is a few thousand lines and tens of kilobytes minified, so it adds little weight to a page.
• Declarative modeling. You build a model by adding shapes — Zdog.Ellipse, Zdog.Rect, and similar — with properties like diameter, stroke, color, fill and translate. Animation is just mutating properties (for example illo.rotate.y += 0.03) and calling updateRenderGraph() inside a requestAnimationFrame loop.
• Interaction is built in. An Illustration can be given dragRotate: true so visitors spin the model themselves, plus callbacks such as onDragStart to stop an idle animation when they take over.

Who it suits, and the trade-off

Zdog fits designers and front-end developers who want a small, charming 3D accent — a spinning logo, an icon, a simple character, an explainer graphic — without pulling in WebGL or a large 3D framework. The trade-off is deliberate: you give up realism, lighting and heavy scene complexity in exchange for a tiny footprint, a friendly API and a distinctive flat-round style. If you need real materials, shadows or large scenes, a full 3D engine is the better fit; if you need a playful illustration that happens to rotate in 3D, Zdog is aimed exactly at that.

Next step

Open the "Hello world" demo, replace the circle and square with your own shapes, and confirm the render target (Canvas or SVG) your page needs. Start with one Illustration and two or three shapes; add dragRotate: true early so you can check the model reads well from every angle before you invest in detail. The project lives at Zdog and the source is on GitHub.

How do I install and set up Zdog for my project?

Install Zdog by either downloading the library file, loading it from a CDN, or installing it through a package manager, then creating an Illustration and adding shapes to it.

Three installation paths

Minimal setup

After the script is loaded, Zdog exposes a global Zdog object. The page's own "Hello world" demo shows the pattern: create a Zdog.Illustration bound to a canvas element, then add shapes such as Zdog.Ellipse and Zdog.Rect with addTo. The Illustration accepts options like dragRotate and an onDragStart callback, and you drive motion by changing rotation and calling updateRenderGraph() inside a requestAnimationFrame loop.

Practical notes

• Zdog renders to both canvas and SVG, so pick your output target before wiring up the element.
• The library is deliberately small (the page cites roughly 2,100 lines, 28KB minified), so it is a light addition rather than a heavy dependency.
• If you use the CDN, pin the version (zdog@1) so a future release does not change behavior under you.

Next step: copy the Hello world snippet into a blank HTML file, confirm a spinning circle and square appear, then swap in your own shapes. If you would rather not hand-write the script tag, the project's own repository is at GitHub — check the README there for the current install instructions.

How can I create and animate a simple 3D model with Zdog?

Create an Illustration, add a few Zdog shapes to it, then nudge a rotation value inside a requestAnimationFrame loop. Zdog is a pseudo-3D engine: shapes are positioned in 3D space but drawn as flat 2D forms, which is why circles stay perfectly round and the code stays small. The library is available as a script tag, npm package, or Bower package, and its own hello-world demo shows the whole pattern.

The core loop

1. Make an Illustration bound to a canvas or SVG element.
2. Add shapes (Ellipse, Rect, and others) with addTo: illo, plus translate, stroke, color, and optionally fill.
3. On each frame, change a rotation property and call illo.updateRenderGraph(), then schedule the next frame.

A minimal version of that flow, based on the page's demo:

const illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  dragRotate: true,
});

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

function animate() {
  illo.rotate.y += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

Practical choices

• Use canvas for a single animated scene; use SVG when you want the shapes to remain inspectable DOM elements or scale cleanly in a static illustration.
• dragRotate: true gives you interactive rotation for free, and an onDragStart callback lets you stop an automatic spin when the user takes over.
• Animate by mutating rotate, translate, or shape properties, then calling updateRenderGraph() once per frame. Skipping that call is the usual reason nothing moves.
• Keep models simple. Zdog is built for flat-shaded, rounded, illustration-style objects, not for lighting, textures, or heavy scenes.

Where it fits

Zdog suits designers and front-end developers making logos, icons, small characters, or playful hero graphics who want vector-illustration simplicity with a third dimension. If you need realistic materials, shadows, or large 3D worlds, a full WebGL engine is the better trade-off. The project lists its source on GitHub and its script on unpkg, and the getting-started walkthrough on the site expands the demo above step by step.

What makes Zdog different from other 3D engines like Three.js?

Zdog is a pseudo-3D engine: its shapes are positioned and rotated in 3D space, but they are drawn as flat 2D forms — circles, rectangles, ellipses, polygons — rather than as lit, textured, polygon-mesh surfaces. That single design choice is what separates it most from a general-purpose WebGL engine like Three.js.

Where the difference shows up

• Rendering model. Zdog renders to canvas or SVG. Three.js renders through WebGL, giving you real depth, lighting, shadows, materials and shaders.
• Shape vocabulary. Zdog's primitives are the ones a vector illustrator already knows: Ellipse, Rect, Polygon, Shape, Hemisphere. Three.js works with geometry buffers, meshes and materials.
• Look. Zdog's circular shapes render as true circles with rounded edges, so you avoid the polygonal jaggies of a low-poly mesh. The result is a flat, graphic, sticker-like style rather than photorealism.
• API style. Modeling is declarative — you add shapes to an Illustration with addTo, then adjust properties like diameter, stroke, color, fill and translate. Three.js requires more setup: scene, camera, renderer, lights, geometry, materials.
• Size. Zdog's whole library is about 2,100 lines, 28KB minified. Three.js is far larger, because it does far more.
• Interaction. Zdog's Illustration supports options such as dragRotate, and the on-page demo stops its spin animation when dragging starts, which is a hint at how it is meant to be used — small, tactile, interactive graphics.

A quick comparison

Who it suits

Zdog fits designers and front-end developers who want a small spinning logo, an animated icon, an illustrated hero graphic or a playful diagram with a sense of depth — without learning a full 3D pipeline. Its author, Dave, says he built it because existing engines were "too powerful and complex" for the simple models he wanted, and that it was inspired by Dogz, a 1995 virtual pet game that rendered 3D scenes using flat 2D circle sprites — the same principle Zdog uses.

It does not fit you if you need realistic lighting, textures, shadows, physics, large imported models or a game world. For that, a WebGL engine is the right tool.

Practical next step

Pick your project by its visual target, not by the word "3D." If the end result should look like an illustration that happens to turn and tilt, start with Zdog. If it should look like a photographed or rendered object, start with a WebGL engine. You can see the difference in the official Zdog examples at Zdog and compare against Three.js before committing.

Can I use Zdog for interactive 3D graphics with drag rotation?

Yes. Zdog supports interactive drag rotation directly on the illustration, so you can build a small 3D scene that users spin with a mouse or touch drag.

The page's own Hello World demo shows the pattern: an Illustration is created with dragRotate: true, and an onDragStart callback is used to stop an automatic spin once the user takes over. Shapes like Ellipse and Rect are then added to that illustration and rendered as flat, rounded forms. The engine is pseudo-3D: geometry lives in 3D space, but everything is drawn as flat 2D shapes on canvas or SVG, which is why circles stay crisp instead of turning into jagged polygons.

What this is good for

• Product or mascot illustrations that users can rotate to inspect from different angles.
• Simple interactive badges, loaders or hero graphics on a marketing page.
• Small educational demos where the point is the interaction, not photoreal rendering.
• Anywhere you want vector-like flat art with a sense of depth and no heavy 3D pipeline.

Trade-offs to weigh

A concrete scenario

Suppose you are building a landing page for a small app and want a friendly 3D logo that visitors can spin. You would create an Illustration on a canvas element, enable dragRotate, add a few Ellipse and Rect shapes at different z positions, then run an animation loop that calls updateRenderGraph() each frame. The page's demo stops the idle spin on onDragStart so the user's drag feels responsive — a small detail that noticeably improves the interaction.

Next step

Open the Getting started walk-through on Zdog and recreate the Hello World demo, then add one shape of your own and change its translate.z. That single edit will show you how depth reads in a pseudo-3D scene before you commit to a larger model.

What types of shapes and styling options are available in Zdog?

Zdog provides a small set of primitives that live in 3D space but render as flat, rounded 2D shapes on canvas or SVG. The core idea is that you build models by adding shapes to an Illustration, then style them with a handful of common properties. According to the page, the library is deliberately "round" — circular shapes render as proper circles with rounded edges rather than polygonal jaggies — and the modeling API is declarative.

Shapes

• Ellipse — circles and ovals. The demo uses diameter: 80 with a translate offset.
• Rect — rectangles and squares. The demo uses width and height.
• Additional primitives — the page's navigation lists a "Shapes" section, implying more shape types than the two shown in the hello-world example. The excerpt does not enumerate them, so treat the full list as something to check in the Getting started and Shapes docs.
• Shapes are added to a parent via addTo, and positioned in 3D with translate: { x, y, z }.

Styling options visible in the page evidence

• stroke — the line weight of the shape's outline (20 for the circle, 12 for the square in the demo).
• color — a fill or stroke color, given as a hex string like '#636' or '#E62'.
• fill: true — fills the shape's interior rather than leaving it as an outline only.
• translate — 3D position offset.
• dragRotate: true on the Illustration — lets the viewer rotate the model by dragging, which is a presentation option rather than a per-shape style.

What this means in practice

If you are a designer or front-end developer who wants simple, flat, illustration-style 3D — icons, mascots, small product spins, playful hero graphics — this set of shapes and styles is probably enough, because the aesthetic is intentionally limited and the API is meant to feel like vector drawing with one extra dimension. If you need realistic materials, lighting, textures, shadows or complex meshes, this is the wrong tool: the page describes Zdog as a pseudo-3D engine whose geometries exist in 3D but render as flat shapes, and it is positioned as small and friendly rather than powerful.

A useful next step: open the hello-world demo and change one property at a time — swap Ellipse for Rect, set fill: true on the circle, or change stroke — to see how the flat rendering behaves as the model rotates. Then check the Shapes section of the docs for the full primitive list before committing to it for a project.

For the official source, see Zdog; the library is also distributed via npm and unpkg, and the page links to a GitHub repository.