Yogesh Chauhan's Blog

What is Zdog?

in Miscellaneous on August 1, 2021

Zdog is a pseudo-3D engine for canvas & SVG.

Zdog helps you design as well as render 3D models. It makes 3D as well as flat shapes.

If you need some quick shapes like circles and rectangles, even in 3D, use this Zdog.

Not just rectangle and circles, but curves, polygon, arc, hemisphere, cone and many more.

Here’s their shapes guide.

Checkout their github repo.

A simplest way to link Zdog to your HTML is just add this script:


<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>


Flat Circle Shape

If you want to add a flat circle, you can add this JavaScript:


// create illo
let illo = new Zdog.Illustration({
  // set canvas with selector
  element: '.zdog-canvas',
});

// add circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  stroke: 20,
  color: '#636',
});

// update & render
illo.updateRenderGraph();

They have a pretty good getting started guide.

You can get as complex as you want.

3D demo

Here’s a quick demo with shapes in 3D:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Number Properties in JavaScriptJavaScriptHow to Install PHP composer in Mac OS Catalina?PHPWhat is a “promise” in JavaScript?JavaScriptHow to convert an HTML radio buttons into a toggle switch using CSS?CSSHow can one check to see if a remote file exists using PHP?PHPWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousWhat’s the difference between a Framework and a Library?MiscellaneousHow to set opacity or transparency using CSS?CSSHow to create a full screen loader using CSS and JavaScript?CSSrandom function in SCSS (Sass)SCSSCSS backface-visibility PropertyCSSHow to create Flickering Texts using CSS?CSS