The Three-Stroke Problem

Design app hits border chaos and the comments are having a field day

TLDR: Penpot says rebuilding its drawing system exposed a surprisingly nasty problem: borders can sit inside, outside, or half-and-half around a shape, and that complicates everything. The community loved the drama, with some praising the honesty and others joking that developers turned a simple line into a space opera.

A seemingly innocent post about borders around shapes somehow turned into a full-on community soap opera. The Penpot team used the famous “three-body problem” from physics as a metaphor for a design headache: once you mix inside, centered, and outside borders while rebuilding the app’s drawing engine, everything gets messy fast. For non-design people, this is basically about where a line sits around a box or circle — and yes, apparently that tiny detail can send a whole app into existential crisis.

The comments, naturally, treated this like peak internet theater. One camp was impressed that the team could turn a boring-sounding border issue into a dramatic story about chaos, uncertainty, and software pain. Another camp was not charmed, joking that programmers will compare anything to space science if it helps explain why a button looks weird. The strongest opinion? Borders are one of those “looks simple, ruins lives” features, and many readers said this post was the most relatable engineering struggle they’d seen in ages.

The jokes flew immediately: people compared it to a love triangle between three stubborn lines, called it “astrophysics for rectangles,” and laughed at the idea that moving a border slightly inward or outward could break the peace. There was also some real debate underneath the memes: should design tools even support every border style if it makes the system harder to rebuild, or is that exactly the kind of detail users expect? In classic comment-section fashion, half the crowd was applauding the honesty, and the other half was screaming, “It’s just a border!”

Key Points

  • The article uses the physics three-body problem as an analogy for rendering complexity during Penpot’s migration from SVG to WebGL.
  • It defines a stroke as a border-like line around a shape whose style, size, and color can be customized.
  • The article explains that in CSS, stroke-like behavior is represented with border-related properties such as border, border-style, border-color, and border-radius.
  • It contrasts CSS with SVG, where stroke styling is expressed using attributes such as stroke, stroke-width, stroke-linecap, and stroke-dasharray.
  • The central technical issue introduced is the distinction between inner, center, and outer strokes, which differ by their position relative to the shape boundary.

Hottest takes

"Astrophysics for rectangles" — pixelpirate
"It’s just a border until it ruins your whole renderer" — marta_dev
"Programmers will invoke the cosmos before admitting CSS is weird" — throwawayvector
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.