What exactly is an H-tree?

An H-tree is a classic plane fractal built from a simple recursive rule: draw a capital-H shape (one horizontal bar plus two vertical bars at its ends), then draw four smaller H shapes, each half the size, centered on the four endpoints of the original H's vertical bars, and repeat that placement inside each new H.

Why does it look increasingly dense and grid-like?

Every H spawns 4 child Hs, so the number of H shapes quadruples each generation (4^depth H shapes at the final depth), while each generation's H is exactly half the size of its parent. That combination, quadrupling count with halving size, is what produces the increasingly fine, densely tiled appearance at higher depths.

What does the Depth setting control?

Depth (0 to 6) sets how many generations of smaller H shapes to draw, starting from a single H at depth 0. Because H count grows as 4^depth, depth 6 already produces over 4,000 individual H shapes.

Is the H-tree used for anything outside of pure mathematics?

Yes, it's a well-known and practically useful pattern in electrical engineering, particularly for clock-distribution networks on integrated circuits, since an H-tree's recursive branching delivers a signal to many endpoints with equal path length from the source at every level.

H-fractal Generator - Recursive H-tree SVG

Overview

Introduction

The H-tree turns a single, familiar letter shape into a genuine fractal: draw an H, place four smaller Hs at its endpoints, and repeat, and the result is a striking, evenly-branching pattern used in both pure mathematics and real engineering.

This tool renders that construction directly, choose a depth, and watch the single starting H fill out into a dense, self-similar lattice of progressively smaller H shapes.

What Is Generate an H-fractal?

A generator for the classic H-tree (H-fractal), built by recursively placing four half-size H shapes centered on the four endpoints of every H's vertical bars.

There is no text input or output, just a single numeric Depth control; the tool builds the recursive H placement internally and renders every generation's bars as SVG line segments.

How Generate an H-fractal Works

The construction starts with one H, made of one horizontal bar and two vertical bars centered on its left and right ends, drawn at a fixed starting size.

At every H's four endpoints, the top and bottom of both vertical bars, a new H is placed, centered on that endpoint, at exactly half the size of its parent H.

This placement repeats recursively at every new H until the chosen depth is reached: each generation's H count is 4 times the previous generation's, while each generation's size is half the previous generation's, continuing down to the target depth.

When To Use Generate an H-fractal

Use it to demonstrate a fractal that's built from an immediately recognizable shape (the letter H) rather than an abstract curve, useful for introducing self-similarity and recursive geometric construction.

It's also a relevant illustration for topics in circuit design, since the H-tree pattern is the standard layout for equal-path-length clock distribution networks.

Often used alongside Generate a Pythagoras Tree Fractal and Generate a V-tree Fractal.

Features

Advantages

Built from a simple, immediately recognizable shape, making the recursive rule easy to follow even for a first introduction to fractals.
Directly connects to a real engineering application (clock-tree distribution), not just an abstract mathematical curiosity.
Exports as clean vector SVG or a flattened PNG for use in illustrations or teaching material.

Limitations

Depth is capped at 6, since H count grows as 4^depth and already exceeds 4,000 individual H shapes at that depth.
This tool only exposes depth as a control, the H's initial size and aspect ratio are fixed internally rather than user-adjustable.

Examples

Depth 0

Input

Depth = 0

Output

A single H shape: one horizontal bar and two vertical end bars.

At depth 0, no child H shapes have been placed yet.

Depth 4

Input

Depth = 4

Output

A dense lattice of 341 total H shapes (1 + 4 + 16 + 64 + 256) filling the drawing area at progressively finer scales.

H count follows the geometric series sum of 4^0 through 4^4, since each generation quadruples the previous one's count.

Best Practices & Notes

Best Practices

Start around depth 3 to 4 to see the characteristic lattice structure clearly before pushing toward the depth-6 maximum, where individual bars become very short.
Download as SVG if you want to trace or highlight specific generations afterward in a vector editor.

Developer Notes

Implemented as a recursive `draw` function that appends the current H's three bars (one horizontal, two vertical) as line segments, then, if the depth limit hasn't been reached, recurses into the four corner positions (`cx +/- size, cy +/- size`) at half the current `size`. Geometry is normalized into the shared 1000x1000 SVG viewBox afterward.

Generate an H-fractal Use Cases

Teaching self-similarity and recursive construction using an immediately recognizable starting shape
Illustrating the H-tree pattern used in real clock-distribution circuit design
Generating a dense, evenly-branching fractal lattice for an illustration or generative-art piece

Common Mistakes

Expecting the pattern to look organic or randomized, it's fully deterministic, the same depth always produces exactly the same lattice of H shapes.
Setting depth too high and expecting individually visible bars, at depth 6 the smallest H shapes are already quite small relative to the full drawing.

Tips

Compare it against the Pythagoras Tree Fractal Generator and V-tree Fractal Generator to see three very different recursive branching rules side by side.
Look for the H-tree pattern the next time you see a diagram of a CPU's clock distribution network, it's the same construction shown here.

Generate an H-fractal