Sketch-n-Sketch: Interactive SVG Programming with Direct Manipulation
summary
Claim: Sketch-n-Sketch actually bridges code and direct manipulation for SVG by pairing a small functional language with GUI refactorings. It auto-generates code from drawn shapes, offers make-equal to pull shared constants, group and abstract to build reusable functions, and a radial array pattern plus sliders for parametric repetition. The demo is a web app implemented in Elm that constructs a Ferris‑wheel of logos live, it works interactively, and limitations include rough algebraic simplification and heuristic choices for ambiguous edits.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 0:35Direct Manipulation
- 2:02Programming
- 4:15Goals
- 4:59Overview
- 6:36Writing the Program
- 11:04Drawing the Rectangle
- 16:09Scale the Logo
- 20:59Translation
- 23:23Making Relationships
- 29:05Limitations
- 34:24Conclusion








