Drawing the isometric VO logo in SVG

The "VO" figure at the top of the home page isn't an image file; it's an SVG drawn with a bit of maths in the browser. Here's how it works.

Isometric projection

Moving a 3D point onto the screen takes one function:

const COS = Math.cos(Math.PI / 6);
const SIN = Math.sin(Math.PI / 6);

export function iso(x: number, y: number, z: number): [number, number] {
  return [(x - y) * COS, (x + y) * SIN - z];
}

x runs down-right, y (depth) runs down-left and z goes up. Pass every corner through it and you get the classic 30° isometric look.

Letters as polygons

My first attempt built the letters out of small cubes, like pixels, but from this angle the V turned into a staircase. In the end each letter is a flat polygon extruded backwards; the hole in the O is a separate inner contour.

Which faces are visible?

The view direction is (1, 1, 1). A wall extruded from an edge is visible only if its outward normal faces that direction; otherwise it's never drawn. Visible walls are sorted by depth and painted back to front (the painter's algorithm). The front face of the letters sits on the plane closest to the viewer, so nothing can cover it: it's drawn last, in one piece, filled with a hatch pattern.

A glow that follows the cursor

On top of the edges there's a second layer whose stroke is a radialGradient. As the mouse moves I convert screen coordinates to SVG coordinates and move the gradient's centre there:

const p = new DOMPoint(clientX, clientY).matrixTransform(svg.getScreenCTM()!.inverse());
glow.setAttribute("cx", String(p.x));
glow.setAttribute("cy", String(p.y));

It's throttled with requestAnimationFrame and never re-renders React.

The click sound

There's no audio file: the Web Audio API synthesises a 120 ms tone that drops from 220 Hz to 110 Hz with a fast volume envelope, giving a short, soft "tock". If you prefer reduced motion, the press animation is skipped.