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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to select an element using its ID without the high specificity of the ID selector?CSSHow to get start index and end index (as int) of substring in Swift?SwiftTackle Accessibility in React with JSXReactLearn how to use Self JOIN in SQL and MySQLSQL/MySQLHow to detect if browser supports WebP format on server side PHP script?PHPHow to add AppRoutingModule in Angular application using command line?AngularHow to select multiple values in React dropdown?ReactLearn how to add Scroll Indicator using CSS and JavaScript?CSSHow to activate and deactivate hooks in a WordPress plugin?WordPressFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousHow to show widgets on the Appearance tab in WordPress?WordPressSelf-Driving and Intelligent NetworksMiscellaneous