8 Bibliotecas de JavaScript para Gráficos – Parte 6: Zdog

/ Blog

Olá!! 🥰

Continuando nossa série sobre bibliotecas JavaScript para criação de gráficos, hoje vamos explorar o Zdog (Github)!

É uma biblioteca open-source (licença MIT) que se destaca por sua abordagem minimalista e charme visual distintivo.

Se você está procurando criar gráficos 3D com um estilo flat design e uma pegada mais artística, o Zdog pode ser exatamente o que você precisa.

O que é o Zdog?

Zdog é uma biblioteca JavaScript para criar gráficos 3D com um visual flat e geométrico. O Zdog se diferencia das outras bibliotecas por não usar WebGL, mas sim renderização em Canvas 2D ou SVG, resultando em gráficos com uma estética única e minimalista.

Siga nossa página no Linkedin e no Instagram e ajude a divulgar nosso conteúdo🥰

Por que escolher o Zdog?

Estética Única

O Zdog produz gráficos com um visual distintivo, lembrando ilustrações isométricas e flat design. É perfeito para projetos que precisam de um toque mais artístico e menos realístico.

Leveza

Com apenas cerca de 28KB minificado, o Zdog é extremamente leve comparado a bibliotecas 3D completas como Three.js.

Simplicidade

A API é intuitiva e fácil de aprender, especialmente para desenvolvedores que já trabalham com Canvas 2D.

Performance

Por não depender de WebGL, funciona bem em dispositivos mais antigos e tem boa performance em mobile.

Primeiros Passos

Instalação

# Via npm
npm install zdog

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

Exemplo Básico

Crie um arquivo zdog.html e cole o código abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<canvas class="illo"></canvas>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste Zdog</title>
    <style>
      body {
	  background: #111;
	  margin: 0;
	}
		  

	.illo {
	  display: block;
	  width: 100%;
	  height: 100%;
	  cursor: move;
	}
    </style>
</head>
<body>
    <h1>Teste do Zdog</h1>
    <p>Arraste para rotacionar a forma!</p>
    
    <!-- Este é o elemento que o Zdog vai usar -->
    <canvas class="zdog-canvas" width="320" height="320"></canvas>
    
    <!-- Carregar a biblioteca do Zdog -->
    <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
    
    <script>
      // Made with Zdog

		var sceneSize = 270;
		var TAU = Zdog.TAU;
		var initialRotate = new Zdog.Vector({ x: -35, y: -45 }).multiply( TAU/360 );

		var illo = new Zdog.Illustration({
		  element: '.illo',
		  rotate: initialRotate,
		  dragRotate: true,
		  resize: 'fullscreen',
		  onDragStart: function() {
			isSpinning = false;
		  },
		  onResize: function( width, height ) {
			this.zoom = Math.floor( Math.min( width, height ) / sceneSize * 2 ) / 2;
		  },
		});

		// ----- model ----- //

		var bird = new Zdog.Anchor({
		  addTo: illo,
		  translate: { z: -20 },
		});

		var letterGroup = new Zdog.Group({
		  addTo: bird,
		});

		// R
		new Zdog.Shape({
		  addTo: letterGroup,
		  path: [
			{ x: -55, y: -55 },
			{ x:  15, y: -55 },
			{ arc: [
			  { x: 55, y: -55 },
			  { x: 55, y: -15 },
			]},
			{ bezier: [
			  { x: 55, y:  0 },
			  { x: 47, y: 13 },
			  { x: 35, y: 20 },
			]},
			{ x: 29, y: 23 },
			{ x: 50, y: 55 },
			{ x: -55, y: 55 },
		  ],
		  rotate: { x: TAU/4 },
		  color: '#F00',
		  stroke: 10,
		  fill: true,
		});

		// G
		new Zdog.Shape({
		  addTo: letterGroup,
		  path: [
			{ x: 0, y: -55 },
			{ bezier: [
			  { x: 18, y: -55 },
			  { x: 32, y: -46 },
			  { x: 40, y: -38 },
			]},
			{ x:  7, y: -5 },
			{ x: 55, y: -5 },
			{ x: 55, y: 53 },
			{ x: 35, y: 47 },
			{ bezier: [
			  { x: 21, y: 52 },
			  { x: 10, y: 55 },
			  { x:  0, y: 55 },
			]},
			{ arc: [
			  { x: -55, y: 55 },
			  { x: -55, y:  0 },
			]},
			{ arc: [
			  { x: -55, y: -55 },
			  { x:   0, y: -55 },
			]},
		  ],
		  translate: { x: -30, y: 20, z: 33 },
		  rotate: { y: TAU/4 },
		  color: '#0F0',
		  stroke: 10,
		  fill: true,
		});

		// B
		new Zdog.Shape({
		  addTo: letterGroup,
		  path: [
			{ x: -55, y: -55 },
			{ x:  25, y: -55 },
			{ arc: [
			  { x: 55, y: -55 },
			  { x: 55, y: -25 },
			]},
			{ bezier: [
			  { x: 55, y: -13 },
			  { x: 49, y:  -7 },
			  { x: 42, y:  -4 },
			]},
			{ x: 35, y: 0 },
			{ x: 42, y: 4 },
			{ bezier: [
			  { x: 49, y:  7 },
			  { x: 55, y: 13 },
			  { x: 55, y: 25 },
			]},
			{ arc: [
			  { x: 55, y: 55 },
			  { x: 25, y: 55 },
			]},
			{ x: -55, y: 55 },
		  ],
		  translate: { y: -10, z: 60 },
		  color: '#00F',
		  stroke: 10,
		  fill: true,
		});

		var eye = new Zdog.Shape({
		  addTo: bird,
		  translate: { x: -60, y: -40, z: 30 },
		  stroke: 18,
		  color: '#111',
		});

		// screen blend letters
		letterGroup.render = function( ctx ) {
		  ctx.globalCompositeOperation = 'screen';
		  Zdog.Group.prototype.render.apply( this, arguments );
		};
		// normal blend eye
		eye.render = function( ctx ) {
		  ctx.globalCompositeOperation = 'source-over';
		  Zdog.Shape.prototype.render.apply( this, arguments );
		};

		// ----- animate ----- //

		function animate() {
		  illo.updateRenderGraph();
		  requestAnimationFrame( animate );
		}

		animate();


    </script>
</body>
</html>

Saída:

Formas e Elementos Disponíveis

Formas Básicas

// Retângulo
new Zdog.Rect({
  addTo: illo,
  width: 60,
  height: 40,
  stroke: 4,
  color: '#E62',
});

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

// Linha
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: 0, y: -40 },
    { x: 40, y: 40 },
    { x: -40, y: 40 },
  ],
  closed: false,
  stroke: 8,
  color: '#E62',
});

Formas 3D

// Retângulo
let rect = new Zdog.Rect({
  addTo: illo,
  width: 120,
  height: 80,
  stroke: 20,
  color: '#E62',
});

// Cilindro
let can = new Zdog.Cylinder({
  addTo: illo,
  diameter: 80,
  length: 120,
  stroke: false,
  color: '#C25',
  backface: '#E62',
});

let partyHat = new Zdog.Cone({
  addTo: illo,
  diameter: 70,
  length: 90,
  stroke: false,
  color: '#636',
  backface: '#C25',
});

Obrigada por ler! Assine gratuitamente para receber novos posts.

Casos de Uso

Ilustrações e Ícones

Perfeito para criar ícones animados, ilustrações para websites e elementos visuais decorativos.

Visualização de Dados Simples

Gráficos de barras 3D, elementos infográficos e visualizações com estética flat design.

Jogos Casuais

Elementos visuais para jogos com estética minimalista e geométrica.

Protótipos

Rapidamente criar protótipos visuais com elementos 3D simples.

Limitações a Considerar

  • Não é WebGL: Não tem a performance de bibliotecas que usam WebGL para cenas complexas
  • Estilo Específico: O visual é bem característico, pode não se adequar a todos os projetos
  • Funcionalidades Limitadas: Não tem recursos avançados como texturas, sombras complexas ou física

Conclusão

Zdog é uma excelente escolha quando você precisa de gráficos 3D com uma estética única, sem a complexidade e o peso de bibliotecas mais robustas. É especialmente útil para:

  • Websites que precisam de elementos visuais chamativos mas leves
  • Projetos com design minimalista e flat
  • Animações simples e interativas
  • Prototipagem rápida de conceitos visuais

Gostou do conteúdo? Compartilhe suas experiências com o Zdog nos comentários e não esqueça de acompanhar nossa série completa sobre bibliotecas JavaScript para gráficos!

Posts relacionados