Penpot, la herramienta de diseño open source, detalla en su blog técnico un desafío interno bautizado como "El problema de los tres trazos". El equipo lo descubrió durante la migración de su renderizador clásico, basado en SVG, a un nuevo sistema basado en WebGL con la biblioteca Skia como motor gráfico.
El núcleo del problema es la convivencia de tres tipos de trazo según su posición respecto a la forma que delimitan: interior, centrado y exterior. Cada estándar gráfico los trata de forma distinta: en CSS el trazo por defecto es interior y para obtener uno exterior hay que recurrir a la propiedad outline; en SVG, en cambio, el trazo centrado es el predeterminado y los tipos interior y exterior requieren máscaras y recortes. Esa divergencia entre formatos vuelve el sistema difícil de predecir cuando se combinan los tres modos, de ahí la analogía con el conocido problema de los tres cuerpos de la mecánica newtoniana.
En el nuevo renderizador WebGL, Penpot opta por apoyarse en Skia, cuyo comportamiento nativo es el trazo centrado. Para conseguir los tipos interior y exterior, los ingenieros ajustan el rectángulo de dibujo con makeInset y makeOutset, desplazándolo media anchura de trazo hacia dentro o hacia fuera. El artículo acompaña cada explicación con fragmentos de código en CSS, SVG y C++ con la API de Skia, e incluye referencias a la documentación de Inkscape, Skia, W3Schools y GeeksforGeeks.