# metafizzy/zdog

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/metafizzy-zdog).**

10,603 stars · 401 forks · JavaScript

## Links

- GitHub: https://github.com/metafizzy/zdog
- Homepage: https://zzz.dog
- awesome-repositories: https://awesome-repositories.com/repository/metafizzy-zdog.md

## Topics

`3d` `canvas` `svg`

## Description

Zdog is a JavaScript graphics library designed for rendering pseudo-three-dimensional geometric models within web browser environments. It functions as a lightweight engine that draws flat, vector-based shapes onto HTML5 canvas or SVG elements by utilizing a scene graph to manage object relationships and spatial transformations.

The library distinguishes itself through a unique approach to volumetric modeling, where three-dimensional depth is simulated on flat shapes by dynamically adjusting stroke thickness. This technique allows for the creation of rounded, plump visual effects without the overhead of complex polygon mesh processing. By organizing objects into hierarchical structures, the engine enables child elements to inherit the transformations of their parents, simplifying the construction of complex, multi-part models.

The framework provides a comprehensive set of tools for interactive web animation, including support for custom coordinate paths, animation easing, and lifecycle hooks for frame-by-frame updates. It also includes built-in capabilities for user interaction, allowing for direct manipulation of scene rotation via mouse or touch gestures. The system automatically handles responsive display requirements, ensuring that graphics remain fluid and clear across varying screen sizes and device resolutions.

## Tags

### Graphics & Multimedia

- [Pseudo-3D Canvas Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/canvas-rendering-engines/pseudo-3d-canvas-engines.md) — Functions as a lightweight engine for rendering flat, geometric 3D models on HTML5 canvas or SVG.
- [Pseudo-3D Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/pseudo-3d-renderers.md) — Implements a unique pseudo-3D rendering technique that simulates depth and volume on flat geometric shapes. ([source](https://cdn.jsdelivr.net/gh/metafizzy/zdog@master/README.md))
- [Scene Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/scene-renderers.md) — Renders three-dimensional geometric shapes by managing a scene graph of objects. ([source](https://zzz.dog/getting-started))
- [Pseudo-3D Graphics](https://awesome-repositories.com/f/graphics-multimedia/pseudo-3d-graphics.md) — Specializes in creating lightweight 3D-style illustrations and animations for web browsers.
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Provides a framework for building smooth animations and volumetric effects by manipulating coordinate paths.
- [Pseudo-3D Projection Systems](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/camera-projection-systems/pseudo-3d-projection-systems.md) — Simulates three-dimensional depth and perspective on flat shapes without complex polygon mesh processing.
- [Scene Graphs](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-graphs.md) — Organizes visual entities into hierarchical tree structures to manage spatial transformations and property inheritance.
- [Immediate Mode Canvas Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/immediate-mode-canvas-renderers.md) — Renders geometric shapes directly onto HTML5 canvas elements using an immediate-mode drawing architecture.
- [User Interaction](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/user-interaction.md) — Enables interactive scene rotation via mouse or touch gestures on the rendered element. ([source](https://cdn.jsdelivr.net/gh/metafizzy/zdog@master/README.md))
- [Custom Geometric Modeling](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/3d-modeling-software/parametric-modeling-engines/custom-object-definitions/custom-geometric-modeling.md) — Enables the construction of unique 3D objects by defining custom vector paths and volumetric properties.
- [Volumetric Rendering Effects](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/volumetric-rendering-effects.md) — Renders three-dimensional volume on flat shapes by adjusting stroke width. ([source](https://zzz.dog/modeling))
- [Responsive Display Managers](https://awesome-repositories.com/f/graphics-multimedia/display-configuration-managers/responsive-display-managers.md) — Automatically adjusts dimensions and pixel density to ensure graphics remain fluid across screen sizes. ([source](https://zzz.dog/api))
- [Custom Shape Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering.md) — Allows definition of arbitrary geometry through custom coordinate paths for rendering. ([source](https://zzz.dog/shapes))
- [Object Hierarchy Management](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/object-hierarchy-management.md) — Groups shapes into nested structures to propagate transformations and manage complex scene compositions. ([source](https://zzz.dog/api))
- [Coordinate Systems](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/coordinate-systems.md) — Defines and manages mathematical axes and coordinate grids for 3D spatial positioning. ([source](https://zzz.dog/api))
- [Responsive Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/canvas-rendering-engines/responsive-rendering-engines.md) — Ensures graphics remain fluid and clear across varying screen sizes and device resolutions.

### User Interface & Experience

- [Interactive Graphics Libraries](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics-libraries.md) — Provides a comprehensive JavaScript library for creating interactive, animated 3D-style models.
- [Animation Loops](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/frame-execution-synchronization/animation-loops.md) — Synchronizes scene updates and re-renders within a continuous animation loop for smooth motion.
- [Interactive Animation Systems](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/interactive-animation-systems.md) — Provides tools for building interactive animations that respond to user gestures with smooth motion.
- [Animation Easing Functions](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-easing-functions.md) — Provides mathematical functions to interpolate values for smooth, non-linear animation transitions. ([source](https://zzz.dog/api))
- [Non-Rendering Anchor Points](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ui-framework-components/conditional-rendering-directives/invisible-wrappers/non-rendering-anchor-points.md) — Uses non-rendering anchor points to apply transformations to child elements. ([source](https://zzz.dog/modeling))
- [Rendering Order Managers](https://awesome-repositories.com/f/user-interface-experience/media-rendering-components/rendering-order-managers.md) — Organizes shapes into groups to define the sequence of drawing for correct layering. ([source](https://zzz.dog/modeling))

### Software Engineering & Architecture

- [Volumetric Stroke Modifiers](https://awesome-repositories.com/f/software-engineering-architecture/object-oriented-models/stroke-objects/volumetric-stroke-modifiers.md) — Simulates three-dimensional volume on flat shapes by dynamically adjusting stroke thickness.
- [Geometric Primitives](https://awesome-repositories.com/f/software-engineering-architecture/object-oriented-models/graphics-primitives/geometric-primitives.md) — Provides a set of geometric primitives including rectangles, ellipses, and boxes for constructing 3D-style models. ([source](https://zzz.dog/shapes))
- [Lifecycle Update Hooks](https://awesome-repositories.com/f/software-engineering-architecture/reactive-update-scheduling/post-update-callbacks/lifecycle-update-hooks.md) — Executes custom logic during the animation lifecycle to synchronize data and perform dynamic updates. ([source](https://zzz.dog/api))

### Content Management & Publishing

- [Hierarchical Document Models](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/document-processing-conversion/document-processing/hierarchical-document-models.md) — Constructs complex models by nesting shapes to inherit parent spatial transformations. ([source](https://zzz.dog/modeling))

### Data & Databases

- [Spatial Vector Calculators](https://awesome-repositories.com/f/data-databases/vector-search/vector-magnitude-calculators/vector-magnitude-calculators/spatial-geometry-calculators/spatial-vector-calculators.md) — Calculates spatial positioning and orientation using mathematical vector objects.
- [Geometry Instance Duplicators](https://awesome-repositories.com/f/data-databases/data-transfer-objects/object-duplicators/geometry-instance-duplicators.md) — Supports duplication of shapes and hierarchies to build complex scenes from reusable components. ([source](https://zzz.dog/modeling))

### Game Development

- [Interactive Rotation Handlers](https://awesome-repositories.com/f/game-development/rotation-management-utilities/interactive-rotation-handlers.md) — Allows users to rotate scenes and objects directly through mouse or touch drag interactions. ([source](https://zzz.dog/api))