Fractal Generator
Thirteen classic fractals, built by their real constructions. Pick a curve, step the iterations up, and take the SVG or PNG.
Local onlyEverything on this page - the preview, the randomness, and every file you download - is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
Thirteen classic fractals, each drawn by its actual construction rather than traced from pictures. Three replace edges with smaller edges (Koch snowflake, Lévy C, dragon). Three remove regions from a shape and repeat on what remains (Sierpinski triangle, Sierpinski carpet, T-square). Two fill the plane with a single non-crossing line (Hilbert, Peano). Two build organic recursion (Pythagoras tree, H-tree). Two are hex- or plus-shape variants of the removal rule (Gosper flowsnake, Vicsek). And one - the Barnsley fern - is plotted by the chaos game: pick one of four affine maps at random, plot the point, repeat until a fern emerges. The iterations slider steps each construction from its first obvious move to the level where the eye gives up counting.
Each curve keeps its own sensible iteration range so the export stays a clean, usable file - the point where more iterations only add kilobytes, not visible detail, is where the slider stops. Filled fractals (snowflake, triangle, carpet, Vicsek, T-square, Pythagoras, fern) export with your gradient fill; stroked fractals (dragon, Hilbert, Peano, Lévy, Gosper, H-tree) export as a single continuous path. Every result is a single-path SVG, which makes them fractal design assets rather than screenshots: they scale from a favicon to a poster without losing a pixel, and there's a 960×960 PNG for raster-only tools.
Questions this tool gets asked
What is a fractal?
A shape whose detail repeats at every scale - zoom into a piece and you find a smaller copy of the whole. The thirteen here are the classic constructed fractals: each is defined by a simple rule applied over and over, and each iteration of the slider is one more application of the rule.
How is the Koch snowflake constructed?
Start with an equilateral triangle. On every edge, replace the middle third with two sides of a smaller equilateral triangle pointing outward. One iteration turns 3 edges into 12; six turns it into a shape with a finite area but a perimeter that grows without bound - the classic coastline paradox in miniature.
What is the Sierpinski triangle and carpet?
The triangle: take a filled triangle, remove the upside-down triangle formed by the midpoints of its sides, and repeat on the three filled triangles that remain. The carpet is the same rule on a square: split into a 3×3 grid, remove the center, and repeat on the eight surrounding squares. Both have zero area in the limit but infinite edge, and both show up in Pascal's triangle, cellular automata, and chaos-game plots.
What is the dragon curve, and how does the Lévy C differ?
Fold a strip of paper in half repeatedly, unfold every crease to a right angle, and look at the edge: that path is the dragon curve. The Lévy C is its 45°-cousin - replace every segment with two half-length segments meeting above it at a right angle. Both are non-crossing space-filling lines; the dragon tiles the plane in four copies, the Lévy fills a region shaped like a rounded shell.
What are the Hilbert and Peano curves for?
Both are space-filling: as iterations grow, the single continuous line visits every point in a region. They're the shortest path that touches every pixel in a grid, which is why they show up in image compression, database indexing, and printer dithering - they preserve locality, so nearby points on the line stay near in the plane.
What's the Vicsek, Gosper, and T-square?
All three are self-similar patterns on a grid. Vicsek keeps the center and four orthogonal cells of a 3×3 and recurses - a plus made of pluses. Gosper (or flowsnake) is the hex-grid equivalent, a single line that space-fills a hexagon. T-square places a filled square, then four half-size squares centered on its corners, and repeats - a Sierpinski-carpet cousin with a square silhouette.
How is the Pythagoras tree built?
Draw a square. On top of it, place a 45-45-90 right triangle. On the two shorter sides of that triangle, place two smaller squares. Repeat on each. The result is a self-similar tree of squares - the classical construction Pythagoras is credited with, though the fractal version came much later. The H-tree is a simpler recursion: at each end of an H, draw a smaller H at right angles.
How does the Barnsley fern work?
The chaos game. Start with a point at the origin, then repeatedly pick one of four affine transformations (weighted 1% / 85% / 7% / 7%) and apply it to the point. Plot each new point. After a few thousand iterations, a fern frond emerges - Michael Barnsley's classic 1988 demonstration that a natural-looking shape can be described by twenty-four numbers. This tool uses a fixed seed so the same fern draws every time.
Why is the iteration slider capped differently per curve?
Each construction grows at a different rate - the snowflake quadruples its points per step, Sierpinski triples its triangles, the dragon doubles its segments, Peano nonuples its edges, the fern plots N points per step. The caps sit where the SVG is still a clean, reasonably sized file and further steps add no visible detail at screen or print sizes.
Can I use these fractals commercially?
Yes - the mathematics is centuries old and what you generate is yours: posters, textbooks, slides, T-shirts, anywhere. The SVG and PNG are produced entirely in this tab, free, with no watermark or attribution required.
Method
- Algorithm
- There is a real shared engine in this file:
lsystem(axiom, rules, iter)rewrites a string by repeated character substitution (fractal.js:29-37), andturtle(str, turnDeg, drawChars, startAngle)walks that string as unit-length forward steps and+/-turns to produce a point path (fractal.js:38-50). Only four of the thirteen modes are actually built on it: hilbert (axiomA, rules forA/B, 90-degree turn,fractal.js:119-123), levy (axiomF, ruleF -> +F--F+, 45-degree turn,fractal.js:142-146), gosper (axiomA, rules forA/B, 60-degree turn,fractal.js:163-170), and peano (axiomL, rules forL/R, 90-degree turn,fractal.js:264-267). The other nine modes are bespoke constructions that do not calllsystemorturtleat all:- koch: direct recursive edge replacement - each iteration turns every segment into 4 by inserting an outward equilateral bump on the middle third (
fractal.js:66-84). - sierpinski: recursive midpoint subdivision of a triangle into 3 corner sub-triangles, discarding the center, then filling the leaf triangles (
fractal.js:87-102). - dragon: its own turn-sequence construction, not the shared turtle - it builds a sequence of +/-90-degree turns by repeatedly duplicating and sign-flip-reversing the prior sequence, then walks it with its own local loop using
Math.cos/Math.sin(fractal.js:105-116). - carpet: recursive 3x3 grid subdivision that skips the center cell (
fractal.js:126-139). - vicsek: recursive 3x3 grid subdivision that keeps only the center-plus-orthogonal cells (
fractal.js:149-160). - tsquare: recursive placement of four half-size squares at the corners of each square (
fractal.js:173-188). - pythagoras: recursive placement of rotated squares along a right-triangle branch (
fractal.js:191-209). - htree: recursive H-shaped line segments, alternating horizontal/vertical, each generation scaled by 1/sqrt(2) (
fractal.js:212-230). - fern: not a recursive geometric construction and not an L-system. It is a chaos-game iterated function system (IFS) - on each of up to ~32,000 steps it draws a random number and picks one of four affine transforms by threshold (0.01 / 0.86 / 0.93 / rest), applies it to the running point, and plots the result as a tiny filled square (
fractal.js:233-261).
- koch: direct recursive edge replacement - each iteration turns every segment into 4 by inserting an outward equilateral bump on the middle third (
- Determinism
- Twelve of the thirteen modes are pure functions of mode and iteration count, with no randomness anywhere in their code path: koch, sierpinski, dragon, hilbert, carpet, levy, vicsek, gosper, tsquare, pythagoras, htree, peano. The fern mode is the exception. It is built on a chaos-game / random-iteration approach and does call a PRNG:
mulberry32(1)(fractal.js:235). That seed is a literal1hardcoded in the source, not a user-facing seed control and not derived from the clock, so for a given iteration value fern still reproduces the identical point cloud on every run. In short: fern's mechanism is probabilistic, but its output is deterministic in practice because the seed never changes. - Export
- The SVG viewBox is 480x480 for every mode (
fractal.js:8) and, as SVG, is resolution-independent - it stays sharp at any display size because it is vector path data, not pixels. The PNG export button rasterizes that same SVG at a fixed 960x960 (fractal.js:304-305), about 0.92 million pixels, regardless of which mode or iteration count is selected. That is well under every browser's silent canvas ceiling (Chrome/Firefox cap around 268 million total pixels, Safari around 5.24 million, iOS around 4096 per side), so this tool has no exposure to the silent-truncation failure mode - the 960x960 cap is a deliberate code choice, not a browser limit being hit. Browsers expose no CMYK color space, so neither the SVG nor the PNG output can be truthfully called print-ready in an ink sense; both are screen-resolution assets, with the SVG usable at any size and the PNG fixed at 960x960. - Licence
- Output is the user's to use for anything, including commercial work, with no attribution required.