The Three-Stroke Problem: Chaos in Penpot's WebGL Rendering

Penpot's migration to WebGL rendering surfaces a chaotic design problem: inner, center, and outer strokes behave differently across CSS, SVG, and Skia. The blog explores how Penpot handles these stroke types, including dashed and multiple strokes, using Skia's drawing functions and workarounds like clipping and masking. It highlights the flexibility gained with WebGL compared to SVG, while acknowledging the complexity of managing multiple stroke variables.