Draw Cantor Fractal
Draw the Cantor set with middle-third deletion. 0-10 iterations, custom colors, dimension and measure shown. Free, offline, client-side, instant, secure.
Generate the Cantor set (Georg Cantor, 1883) by recursively removing the middle third of every line segment.
How to Use Draw Cantor Fractal
- Set iteration depth (0-10). Iter 0 = single line. Iter 1 = 2 segments (left and right thirds). Each iteration doubles the segment count: iter 6 = 64, iter 10 = 1024. Total stack height = (iter + 1) × level spacing.
- Pick level spacing and initial width. Level spacing 10-50 px controls vertical distance between successive iteration rows. Initial width 200-800 px sets the iter-0 segment length.
- Choose colors. Primary and secondary hex colors used in alternating mode (even-indexed rows use secondary, odd use primary). Disable the "Alternate colors" toggle to use the primary color everywhere.
- Pick vertical alignment - Top-down (iter 0 at top, grows down), Center (the default, balanced), or Bottom-up (iter 0 at bottom, grows up).
- Watch live updates. Every slider/color/dropdown change re-renders after a 200 ms debounce. Or press Ctrl+Enter / click Draw for an immediate render.
- Read the stats line: total segments (2^iter), total summed length in pixels (initial × (2/3)^iter), Hausdorff dimension (constant 0.6309), Cantor measure as a percentage. As iter → ∞, total length → 0 (zero-measure fractal).
- Save the image. Copy puts the PNG bytes on your clipboard via ClipboardItem (paste straight into image editors). Download writes a timestamped file. Both render at backing-store resolution (CSS size × devicePixelRatio) for Retina crispness.
Frequently Asked Questions
What is the Cantor set?
Georg Cantor (1883). Start with the interval [0, 1]. Remove the open middle third (1/3, 2/3). You’re left with [0, 1/3] ∪ [2/3, 1]. Repeat for each remaining segment. The LIMIT set is uncountably infinite (same cardinality as [0, 1] itself), has Lebesgue measure zero (its total length is 0), is totally disconnected (no two distinct points have an interval between them within the set), and has Hausdorff dimension log(2)/log(3) ≈ 0.6309. It’s the prototype of every “fractal” idea that came later.
What does “zero measure” mean?
Lebesgue measure of a finite union of intervals is the sum of their lengths. After iter n, the Cantor set’s measure is (2/3)^n × initial-length. (2/3)^10 ≈ 0.0173 (1.73%). (2/3)^50 ≈ 1.6e-9 (basically 0). As n → ∞ the measure goes to 0 exactly. But the SET is still nonempty – in fact, it has uncountably many points. This shows that “size” (measure) and “cardinality” (how-many-points) are independent notions in mathematics.
What’s “uncountable infinity”?
Cantor (1873) proved that the real numbers in [0, 1] cannot be put in bijection with the natural numbers – there are “more” of them. The Cantor set has the SAME cardinality as the reals, even though it has measure 0. Concretely: the Cantor set is exactly the set of numbers in [0, 1] whose ternary (base-3) expansion contains only digits 0 and 2 (no 1s). Map each such ternary string to a binary string by replacing 2 with 1 – you’ve got a bijection to [0, 1] in binary, which is the reals. Hence uncountable.
What does dimension 0.6309 mean?
Integer-dimensional spaces: 0 = point, 1 = line, 2 = area, 3 = volume. The Cantor set sits between 0 and 1 – it’s not a single point (uncountably many), and it’s not a full line (zero length). Hausdorff dimension formalises this: for a self-similar set composed of N copies each scaled by 1/S, dim = log(N)/log(S). Cantor: N=2 (two thirds kept), S=3 (scaled by 1/3). dim = log 2 / log 3 ≈ 0.6309. Lower = sparser.
How does this differ from Cantor Dust (2D)?
The 1D Cantor set: middle third removed from a line segment. Dimension 0.6309. 2D Cantor dust: Cartesian product C × C of two Cantor sets – only 4 corner sub-squares per iteration. Dimension log(4)/log(3) ≈ 1.2619 (= 2 × 0.6309). The product dimension equals the sum of factor dimensions for self-similar sets like these. See the draw-cantor-dust-fractal tool for the 2D version.
Why does my image look crisp on Retina now?
The canvas has two resolutions: CSS display (e.g. 800×500) and backing store (the pixel buffer). On Retina (DPR = 2), the CSS-displayed 800 px corresponds to 1600 physical pixels. If the backing store stays 800×800, the browser upsamples (blurry). We fix it by setting backing store to 1600×1000 and scaling the drawing transform by 2. Result: anti-aliased lines stay sharp.
What happens at iteration 10 with 800px initial width?
1024 segments, total summed length = 800 × (2/3)^10 ≈ 13.9 px. Each individual segment is 800 × (1/3)^10 ≈ 0.0136 px – well below 1 pixel. The browser renders them at minimum 1 px line width, so visually adjacent segments merge into solid blocks. Mathematically still distinct points, visually a smear. Try iter 8 with a thicker line for clarity or iter 10 with a thinner line to see more detail.
Can I make non-standard Cantor sets?
Not in this tool – the rule is fixed (middle-third removal). But conceptually: any “remove middle p” rule generates a Cantor-style set with dimension log(2)/log(1/((1−p)/2)). p = 1/3 (this tool): dim 0.6309. p = 1/5 (keep 2/5 each side): dim ≈ 0.7565. p = 1/2 (keep 1/4 each side): dim = 0.5. Smaller removal = denser set = higher dimension closer to 1. The construction generalises to “fat Cantor sets” with POSITIVE measure too, but those don’t have the same self-similarity.
Is my data secure?
Yes, 100% client-side. Segment generation and Canvas drawing run in your browser. No fetch/XHR after initial page load. Settings, colors, and downloaded PNGs never leave your device. Verify in your browser’s Network tab.