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

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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
Check whether a variable exists and not empty in PHPPHPThe basics of CSS Box modelCSSPagination in CSS with multiple examplesCSSHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptThe SELECT DISTINCT Statement in SQLSQL/MySQLWhat are Controlled Components in React?ReactHow to send and receive query strings via links in Angular 9?AngularHow to Use SQL MAX() Function with Dates?SQL/MySQLWhat’s a repository on Github?MiscellaneousDISTINCT ON: The confusing, unique and useful feature in PostgresPostgresHow to solve “framework not found” error in Swift?SwiftHow to convert an object from API to JSON array in Angular 9?Angular