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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
What are Google Web Stories and How to create them in WordPress?WordPressapply_filters function in WordPressWordPressThe Lending Club Analysis using Logistic Regression and Random Forest in RStudioMiscellaneous3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptConfiguring Modules with @forward rule in SCSS (Sass)SCSSHow to change your WordPress database prefix?WordPressHow to use images instead of HTML radio buttons using CSS?CSSThe Difference Between the echo and print Commands in PHPPHPEXISTS and NOT EXISTS in PostgresPostgresCheck whether a variable exists and not empty in PHPPHPHow to change style of all direct children of an element using jQuery?jQueryHow to set the permissions on all files and folders in Mac?Miscellaneous