---
title: "Spielwerk"
url: "https://divergenz.ch/projects/spielwerk/"
language: "en"
description: "A Rust-powered workspace for generative design. Adjust rules to create patterns and motion, preview changes live, and export your artwork."
---

# 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](https://rust-lang.org/) · [WebAssembly](https://webassembly.org/) · [Svelte](https://svelte.dev/) · [WebGL2](https://registry.khronos.org/webgl/specs/latest/2.0/)

![Adjusting the distortion of a moving liquid gradient, then switching to Arrow Maze in the same workspace.](https://divergenz.ch/images/case-studies/spielwerk-rust/poster.webp)

Liquid Gradients and Arrow Maze share one workspace for editing, previewing, and exporting artwork.

[Open video (MP4)](https://divergenz.ch/videos/case-studies/spielwerk-rust/overview.mp4)

![Liquid Gradients with flowing colors beside its design controls.](https://divergenz.ch/images/case-studies/spielwerk-rust/liquid-gradients.webp)

Adjust the shape and palette of a moving color field.

![Arrow Maze drawing a purple arrow composition in the shared workspace.](https://divergenz.ch/images/case-studies/spielwerk-rust/arrow-maze.webp)

Build arrow compositions by changing the rules for their paths.

![Truchet Tiles showing a geometric pattern beside its design controls.](https://divergenz.ch/images/case-studies/spielwerk-rust/truchet-pattern.webp)

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.

[Try Spielwerk in your browser](https://spielwerk.net)


[Explore the Spielwerk source](https://github.com/divergenz-ch/spielwerk)


[Back to projects](https://divergenz.ch/projects/)

[Deutsch](https://divergenz.ch/de/projekte/spielwerk/)