Gwangbokjeol (광복절), on 15 August, is Korea’s National Liberation Day, marking the end of Japanese colonial rule in 1945. Zdog is a small JavaScript library for drawing 3D-ish illustrations on a <canvas> or in SVG. Its shapes have real positions in 3D space and turn like 3D objects, but they’re drawn as flat shapes, so you get something that looks like a flat illustration you can spin rather than a 3D render. That suits something simple like a flag.

A minimal Zdog example

#

Two shapes, drag to rotate, and an animation loop:

<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
  const illo = new Zdog.Illustration({
    element: '.zdog-canvas',
    dragRotate: true, // drag to turn the scene
  });

  // a square, pushed back
  new Zdog.Rect({
    addTo: illo,
    width: 80,
    height: 80,
    translate: { z: -30 },
    stroke: 8,
    color: '#0047a0',
  });

  // a filled circle, pulled forward
  new Zdog.Ellipse({
    addTo: illo,
    diameter: 60,
    translate: { z: 30 },
    stroke: 8,
    color: '#cd2e3a',
    fill: true,
  });

  function animate() {
    illo.rotate.y += 0.02;
    illo.updateRenderGraph();
    requestAnimationFrame(animate);
  }
  animate();
</script>

Each shape joins the scene with addTo, and translate.z is what makes it 3D: turn the scene and the circle swings round in front of the square. updateRenderGraph() updates and redraws everything, which is why it sits inside the loop.

Official Docs

#

https://zzz.dog/

The code used is available to view on CodePen.

My Example

#