Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。 今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。

Zdogの使い方

実行例です。奥行きを持った回転をしているのが分かります。

様々なイラストがデモとして用意されています。

実装例です。

let isSpinning = true;

let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  dragRotate: true,
  // stop spinning when drag starts
  onDragStart: function() {
    isSpinning = false;
  },
});

// circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  translate: { z: 40 },
  stroke: 20,
  color: '#636',
});

function animate() {
  illo.rotate.y += isSpinning ? 0.03 : 0;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}

animate();

この例ではCanvasに描いています。

ZdogはSVGまたはCanvasを使ってイラストを描きます。デザインは円や四角、曲線などを組み合わせてJavaScriptで描きます。ボタンをクリックした際などにインタラクティブな操作も簡単にできます。SVGやCanvasの活用として、興味深いソフトウェアです。

ZdogはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG metafizzy/zdog: Flat, round, designer-friendly pseudo-3D engine