Noise-Displaced Line Art
Evenly spaced horizontal lines are the simplest possible drawing. Displace each line vertically by the output of a noise function and the mechanical grid transforms into something organic: a topographic landscape, a sound wave visualization, a cross-section of flowing water. The technique is foundational in generative art, used by practitioners from Vera Molnár to contemporary creative coders. The mathematics are straightforward. The visual results are endlessly varied.
Fractal Brownian Motion
Each line on this page is displaced by fractal Brownian motion (fBm), a technique that layers multiple octaves of value noise at increasing frequency and decreasing amplitude. The first octave creates broad, sweeping curves. The second adds medium undulations. The third introduces fine texture. The result is detail at every scale, the same statistical self-similarity that appears in coastlines, mountain ridges, and cloud formations. Ken Perlin originally developed coherent noise functions for the 1982 film Tron, earning an Academy Award for Technical Achievement. The technique remains the foundation of procedural generation across film, games, and generative art four decades later.
Color as Gradient
Each artwork on this page generates two random hue values and interpolates between them from top to bottom. The hues are chosen to be at least 90° apart on the HSL color wheel, ensuring visible contrast while maintaining chromatic harmony. The combination of random noise shape and random color gradient means that every generation produces a genuinely unique artwork. The probability of any two generations looking alike is effectively zero.
Explore Award-Winning Generative Design
The flowing line patterns demonstrated above at dice83 shows how simple mathematical systems can generate rich visual complexity. By displacing evenly spaced lines with layered noise functions, a rigid grid transforms into forms that resemble landscapes, waves, or geological contours. Techniques like fractal Brownian motion allow artists and designers to simulate natural variation through purely computational means. This approach reflects a broader practice within generative design, where algorithms, procedural systems, and mathematical models are used to create evolving visual structures. From noise-driven graphics to data-driven illustrations and parametric architecture, designers increasingly explore how code can become a creative medium. If our generative line experiment sparks your curiosity, the A' Generative, Algorithmic, Parametric and AI-Assisted Design Award category showcases outstanding projects where designers use algorithms, computational systems, and AI-assisted processes to produce innovative visual works as well as architecture and products.
Above is today's featured Generative Design. Discover more works through the A' Design Awards.
In the Classroom
This tool introduces students to procedural generation, the technique behind terrain in video games, textures in animated films, and patterns in generative art. Have students generate several artworks at /lines/15 (fewer lines, clearer structure) and sketch what landscape each one resembles. Then compare /lines/80 (dense, detailed) to see how line count affects the visual character. Discussion questions: What makes these look "natural" when every point is mathematically computed? Why does layering simple noise at different scales produce complexity that resembles real topography?
Customize Through the URL
- /lines — 30 lines (default)
- /lines/15 — sparse, bold strokes
- /lines/60 — dense, detailed
- /lines/120 — ultra-dense texture
Private by Architecture
Every artwork is generated entirely in your browser. The noise seed comes from crypto.getRandomValues(). The server delivers the page; your device produces the art. Downloaded SVGs contain no metadata linking back to your session. No accounts, no cookies, no data leaves your browser.
