Menu

Spielwerk

A Rust-powered workspace for generative design. Adjust rules to create patterns and motion, preview changes live, and export your artwork.

Contribution
Interaction design · Generative graphics · Rust engine · Export workflows
Technologies
Rust · WebAssembly · Svelte · WebGL2
Liquid Gradients and Arrow Maze share one workspace for editing, previewing, and exporting artwork.
Open video (MP4)
  • Liquid Gradients with flowing colors beside its design controls.
    Adjust the shape and palette of a moving color field.
  • Arrow Maze drawing a purple arrow composition in the shared workspace.
    Build arrow compositions by changing the rules for their paths.
  • Truchet Tiles showing a geometric pattern beside its design controls.
    Explore tile patterns without leaving the workspace.

Shape the rules, see the result

Spielwerk is our workspace for generative design. Adjust a rule and watch the artwork change. You can explore a composition’s density, color, or motion without editing code.

Arrow Maze draws branching arrow compositions. Truchet Tiles builds geometric patterns. Liquid Gradients creates flowing color fields and can apply the same distortion to an image you upload. Each tool places its controls beside a live artboard.

Rebuilt around a Rust engine

We rewrote Spielwerk’s graphics engine in Rust and brought the tools into one workspace. Rust runs in the browser through WebAssembly and calculates the geometry and animation timing. A Svelte interface handles the controls; Liquid Gradients uses the GPU to render its pixels.

The shared workspace lets you switch tools, resize the artboard, and save snapshots of variations you want to return to. Nine tools are available. Logo Extruder and Font Remixer remain separate legacy tools and have not yet moved into the new workspace.

Take the artwork into your project

Export a still image, an animation, or a website embed, depending on the tool. The geometric tools export SVG and PNG, with GIF available for selected animations. Liquid Gradients exports PNG images and animated website embeds. Embed packages include the runtime and assets needed to display the work on another site.

Your snapshots and uploaded images stay in your browser. Export snapshots as JSON to keep a copy or move them to another device.

The arrow maze on this website still uses the earlier exported runtime. The new workspace now provides its own website embed packages.

Back to projects