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 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 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

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
How to convert a function component into a class in React?ReactHow to float an image around texts?CSSResponsive Masonry Grid using CSS columns PropertyCSSHow to import MySQL small sample database into phpMySQL?SQL/MySQLHow to create a Child Theme in WordPress?WordPressHow to apply style to the first-child using jQuery?jQueryWhat are Big Data Clusters in SQL Server?SQL/MySQLEssential SQL Commands We Need to KnowSQL/MySQLCreate a simple bar chart and column chart using pure CSS gridCSSWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow to create a smooth scrolling effect with CSS?CSSWhat is Prototypal Inheritance in JavaScript?JavaScript