Generate Gosper Curve

What It Does

The Gosper Curve Generator lets you create and visualize the Gosper curve — also known as the flowsnake curve — a fascinating space-filling fractal discovered by mathematician Bill Gosper in the 1970s. Unlike simpler fractals, the Gosper curve is built on a hexagonal substitution grammar, meaning each iteration replaces every line segment with a specific seven-segment pattern that tiles perfectly across the plane without overlap or gaps. The result is a curve that, at high iteration depths, fills a roughly hexagonal region of space — hence the nickname "flowsnake," a playful reference to its snake-like, flowing shape. This tool gives you full control over iteration depth, canvas dimensions, line color, background color, and stroke thickness, making it equally useful for mathematical exploration and creative design work. Whether you are a student studying L-systems and formal grammars, a developer building generative art, a researcher visualizing recursive structures, or a designer seeking organic hexagonal textures, this generator handles the heavy computational lifting so you can focus on experimentation and output. At low iteration depths (1–3), you can clearly see the seven-segment building block and how the substitution grammar works. At higher depths (5–7), the curve takes on its distinctive flowing, space-filling character. The rendered image can be copied directly from the canvas for use in documents, presentations, or design projects. The Gosper curve is one of the most visually distinctive and mathematically rich fractals in the L-system family, and this tool makes it accessible to anyone — no coding required.

How It Works

Generate Gosper Curve produces new output from rules, parameters, or patterns instead of editing an existing document. That makes input settings more important than input text, because the settings are what define the shape of the result.

Generators are only as useful as the settings behind them. When the output seems off, check the count, range, delimiter, seed values, or pattern options before judging the result itself.

All processing happens in your browser, so your input stays on your device during the transformation.

Common Use Cases

• Students and educators exploring L-system grammar rules can use this tool to visually demonstrate how a simple substitution rule generates complex fractal geometry across multiple iterations.
• Generative artists and graphic designers can render high-iteration Gosper curves as organic, hexagonal background textures or decorative elements for digital and print media.
• Mathematics researchers and enthusiasts can compare the space-filling behavior of the Gosper curve against other curves like the Hilbert or Peano curve to study differences in fractal dimension and tiling properties.
• Game and application developers prototyping procedural terrain or dungeon layouts can use the Gosper curve's hexagonal tiling nature as inspiration for hex-grid map generation algorithms.
• Teachers preparing visual aids for topology or recursive function lectures can generate clean, high-contrast Gosper curve images at specific iteration depths to illustrate how recursion depth affects visual complexity.
• Data visualization specialists can use Gosper curve patterns as an aesthetic framework for layouts that need to fill irregular hexagonal regions, such as geographic hex-bin maps.
• Hobbyist programmers learning about formal grammars and turtle graphics can use the rendered output as a reference to validate their own L-system implementations.

How to Use

1. Select your desired iteration depth using the provided control — start with depth 2 or 3 to clearly see the recursive structure before increasing to depth 5 or 6 for the fully space-filling flowsnake appearance.
2. Set your canvas width and height to match your intended output size — larger canvases at higher iteration depths will produce sharper, more detailed curves without pixelation.
3. Open the color pickers to choose a line color and background color that provide strong contrast; classic choices include white on black or a vivid color on a dark neutral background for maximum visual impact.
4. Adjust the stroke thickness slider to control how bold the curve lines appear — thinner strokes reveal more structural detail at high iteration depths, while thicker strokes create a bolder, more graphic look.
5. Click the generate or render button to compute and draw the Gosper curve on the canvas using the current settings — rendering may take a moment at iteration depths of 6 or higher.
6. Once rendered, use the copy or download option to capture the finished image from the canvas for use in your project, presentation, or design workflow.

Features

• Peano-Gosper L-system grammar engine that correctly implements the hexagonal substitution rules for authentic flowsnake curve generation at any supported iteration depth.
• Adjustable iteration depth control that lets you explore the curve from its simplest seven-segment base form all the way to deeply recursive, space-filling patterns.
• Independent canvas width and height inputs so you can generate curves sized for any output format, from square social media graphics to wide landscape banners.
• Full color customization with separate pickers for line color and background color, enabling high-contrast renders for print, web, or presentation use.
• Stroke thickness input that gives you pixel-level control over line weight, letting you balance structural detail against visual boldness depending on your use case.
• Instant canvas rendering that draws the complete curve in your browser without requiring any downloads, plugins, or server-side processing.
• Copy-to-clipboard or image export capability so the finished Gosper curve can be immediately used in external applications, documents, or design tools.

Examples

Below is a representative input and output so you can see the transformation clearly.

Order: 0
Size: 100
Angle: 90

Path:
(0,0)
(100,0)

Edge Cases

• Very large inputs can still stress the browser, especially when the tool is working across many numbers. Split huge jobs into smaller batches if the page becomes sluggish.
• Empty or whitespace-only input is technically valid but may produce unchanged output, which can look like a failure at first glance.
• If the output looks wrong, compare the exact input and option values first, because Generate Gosper Curve should be repeatable with the same settings.

Troubleshooting

• Unexpected output often means the input is being split or interpreted at the wrong unit. For Generate Gosper Curve, that unit is usually numbers.
• If a previous run looked different, check for hidden whitespace, changed separators, or a setting that was toggled accidentally.
• If nothing changes, confirm that the input actually contains the pattern or structure this tool operates on.
• If the page feels slow, reduce the input size and test a smaller sample first.

Tips

For the clearest structural insight, render iterations 2 through 4 side by side by generating each depth separately and saving the images — this makes the self-similar substitution pattern immediately visible. At iteration depth 6 or 7, use a large canvas (1000px or more) and a thin stroke (1–2px) to prevent the curve lines from merging together into solid fills. If you are using the output for a tiling pattern, note that the Gosper curve's outer boundary approximates a hexagon, so repeating it at 60-degree rotations can produce seamless hexagonal tile mosaics. For the most visually striking results, try a deep jewel-tone line color (electric blue, emerald green) against a pure black background.