// ALSO BUILDING 08 - 2026

puffy-draw

Draw a closed 2D stroke and watch it inflate into a rounded 3D model, inspired by the classic "Teddy" inflation technique - silhouette in, puffed mesh out, no modeling tools required.

Stack
React 18, Three.js r128, single-file component
Status
Prototype
Built with
Claude artifact
Sketch on the left, inflated 3D mesh on the right - the same closed stroke, puffed up.

What it is

Turn a 2D sketch into a 3D model. Draw a closed shape and puffy-draw inflates it into a rounded 3D mesh - a browser recreation of the classic "Teddy" technique.

Why I built it

Long ago, when I was experimenting with 3D graphics apps like Blender, Maya, and 3D Studio Max, I ran into a fascinating tool called "Teddy." It was a simple Java program written by a researcher to go alongside a dense, technical paper - all the math and programming decisions behind it, made for an academic graphics conference. Teddy let you draw a simple 2D shape and automatically "inflated" it into a 3D model.

After the unexpectedly fast success of my TellMeAStory idea, I wondered if I could recreate Teddy by handing Claude the academic paper and seeing what happened. The result gets about 90% of Teddy's original features, with only minor adjustments after the first prompt. I'm using this to learn more about 3D graphics tools and how to build them in the browser. Next I'd like quick export to Blender, so you can take your creations into a more capable tool with ease.

How it works

It's a single-file React component with Three.js. The closed 2D stroke gets smoothed and triangulated into a flat mesh, then every interior vertex is pushed up by its distance to the boundary - so the shape stays thin at the edges and domes up in the middle. That front face is mirrored to a back face, and the whole thing renders interactively so you can spin it around. The interesting part was reading the Teddy paper's inflation method and getting it to behave in a browser.

  • Draw a closed shape or pick a preset, watch it inflate live.
  • Puffiness and smoothness sliders, wireframe and auto-rotate toggles.
  • Hand-rolled orbit controls to inspect the mesh from any angle.
  • Planned: export to Blender so a sketch can leave the browser.